diff --git a/next.config.ts b/next.config.ts index 5f003e5..e9ffa30 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,14 +2,6 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ - rewrites: async () => { - return [ - { - source: '/api/v1/:path*', - destination: 'http://localhost:8080/api/v1/:path*', - }, - ]; - }, }; export default nextConfig; diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 6ff48cc..72b6cdd 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -662,8 +662,6 @@ export default function AuthPage() { )} - - {/* Submit Button */} = ({ onVerify, onClose const response = await axios.get(`${API_BASE_URL}/captcha/generate`, { withCredentials: true // 关键：允许跨域携带凭证 }); - const { code, msg: resMsg, data } = response.data; - const { masterImage, tileImage, captchaId, y } = data; + const { code, msg: resMsg, captcha_id, mBase64, tBase64, y } = response.data; // 后端返回成功状态（code=200） if (code === 200) { // 设置背景图 - setBackgroundImage(masterImage); + setBackgroundImage(mBase64); // 设置拼图图片 - setPuzzleImage(tileImage); + setPuzzleImage(tBase64); // 设置拼图y坐标（从后端获取，以背景图左上角为原点） setPuzzleY(y); // 设置进程ID（用于后续验证） - setProcessId(captchaId); + setProcessId(captcha_id); // 随机生成拼图x坐标（确保拼图在背景图内） // setPuzzlePosition(Math.random() * (CANVAS_WIDTH - 50 - 50) + 50); // 保存后端返回的提示信息 @@ -164,59 +163,47 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose try { // 向后端发送验证请求，参数为滑块位置（x坐标）和进程ID - // 使用sliderPosition作为dx值，这是拼图块左上角的位置 const response = await axios.post(`${API_BASE_URL}/captcha/verify`, { dx: sliderPosition, // 滑块位置（拼图左上角x坐标，以背景图左上角为原点） - captchaId: processId // 验证码进程ID + captcha_id: processId // 验证码进程ID },{ withCredentials: true }); const { code, msg: resMsg, data } = response.data; // 保存后端返回的提示信息 setMsg(resMsg); - // 根据后端返回的code判断验证结果 - // 验证成功：code=200 + // 后端返回成功 （code=200） if (code === 200) { - // 增加尝试次数 - setAttempts(prev => prev + 1); - // 重置所有状态，确保验证成功状态的纯净性 - setShowError(false); - setVerifyResult(false); - // 直接设置验证成功状态，不使用异步更新 - setIsVerified(true); - // 延迟1.2秒后调用验证成功回调 - setTimeout(() => onVerify(true), 1200); - } - // 验证失败：code=400 - else if (code === 400) { - // 确保错误状态的正确性：验证失败显示红色 - setVerifyResult(false); - setShowError(true); - setIsVerified(false); - // 增加尝试次数 - setAttempts(prev => prev + 1); - // 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果 - setTimeout(() => { - setSliderPosition(0); - setShowError(false); + // 验证成功（data=true） + if (data === true) { + setIsVerified(true); + setVerifyResult(true); + // 延迟1.2秒后调用验证成功回调 + setTimeout(() => onVerify(true), 1200); + } + // 验证失败（data=false） + else { setVerifyResult(false); - setIsVerified(false); - }, 1500); + setShowError(true); + // 增加尝试次数 + setAttempts(prev => prev + 1); + // 1.5秒后重置滑块位置并隐藏错误提示 + setTimeout(() => { + setSliderPosition(0); + setShowError(false); + }, 1500); + } } - // 后端返回系统错误（500） - else if (code === 500) { - // 系统错误显示橙色 + // 后端返回参数错误（400）或系统错误（500） + else if (code === 400 || code === 500) { setVerifyResult('error'); setShowError(true); - setIsVerified(false); // 增加尝试次数 setAttempts(prev => prev + 1); - // 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果 + // 1.5秒后重置滑块位置并隐藏错误提示 setTimeout(() => { setSliderPosition(0); setShowError(false); - setVerifyResult(false); - setIsVerified(false); }, 1500); } @@ -331,12 +318,12 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose // 加载中显示旋转动画 return
; } - // 验证成功时，无论其他状态如何，都显示对勾图标 if (isVerified) { + // 验证成功显示对勾图标 return ; } - // 验证失败或错误时显示叉号图标 - if (showError || verifyResult === 'error') { + if (showError) { + // 验证失败显示叉号图标 return ; } // 默认显示蓝色圆点 @@ -345,12 +332,8 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose const getStatusText = () => { - if (isVerified) { - // 验证成功时优先显示成功消息 - return msg; - } - if (verifyResult === 'error' || showError) { - // 错误或验证失败时显示后端返回的消息 + if (verifyResult === 'error' || showError || isVerified) { + // 错误、验证失败或成功时显示后端返回的消息 return msg; } // 默认显示拖拽提示 @@ -359,21 +342,17 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose const getStatusColor = () => { - if (isVerified) return 'text-green-700'; if (verifyResult === 'error') return 'text-orange-700'; + if (isVerified) return 'text-green-700'; if (showError) return 'text-red-700'; return 'text-gray-600'; }; const getProgressColor = () => { - // 验证成功时，无论其他状态如何，都显示绿色渐变 - if (isVerified) return 'bg-gradient-to-r from-green-400 to-green-500'; - // 系统错误（后端返回400/500）显示橙色渐变 if (verifyResult === 'error') return 'bg-gradient-to-r from-orange-400 to-orange-500'; - // 验证失败（后端返回200但data=false）显示红色渐变 - if (showError && verifyResult !== 'error') return 'bg-gradient-to-r from-red-400 to-red-500'; - // 默认显示蓝色渐变 + if (isVerified) return 'bg-gradient-to-r from-green-400 to-green-500'; + if (showError) return 'bg-gradient-to-r from-red-400 to-red-500'; return 'bg-gradient-to-r from-blue-400 to-blue-500'; }; @@ -407,7 +386,7 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose /> )} {/* 可移动拼图块 */} - {puzzleImage && ( + {puzzleImage && !isVerified && (
= ({ onVerify, onClose alt="拼图块" className={`${isVerified ? 'opacity-100' : 'opacity-90'}`} style={{ + filter: isVerified ? 'drop-shadow(0 0 10px rgba(34, 197, 94, 0.5))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))' }} /> @@ -470,7 +450,7 @@ export const SliderCaptcha: React.FC = ({ onVerify, onClose {/* 底部信息区域 */}
- 尝试次数: {attempts} + 尝试次数: {attempts + 1}/5 安全验证 diff --git a/src/lib/api.ts b/src/lib/api.ts index 0007298..17d62b5 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,4 +1,4 @@ -export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || '/api/v1'; +export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api/v1'; export interface Texture { id: number;