vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 手机验证码调试

Browse Source
This commit is contained in:
zdl
2025-10-16 10:09:15 +08:00
parent 8ce9268e76
commit 7c166f7186
9 changed files with 212 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
craco.config.js
View File

@@ -219,5 +219,14 @@ module.exports = {
devMiddleware: {
writeToDisk: false,
},
// 代理配置：将 /api 请求代理到后端服务器
proxy: {
'/api': {
target: 'http://49.232.185.254:5001',
changeOrigin: true,
secure: false,
logLevel: 'debug',
},
},
},
};

4
src/components/Auth/AuthFormContent.js
View File

@@ -37,7 +37,7 @@ import WechatRegister from './WechatRegister';
// API配置
const isProduction = process.env.NODE_ENV === 'production';
const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5000";
const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5001";
// 统一配置对象
const AUTH_CONFIG = {
@@ -54,7 +54,7 @@ const AUTH_CONFIG = {
// API配置
api: {
endpoint: '/api/auth/register/phone',
purpose: 'register',
purpose: 'login', // ⚡ 统一使用 'login' 模式
},
// 功能开关

131
src/components/Auth/WechatRegister.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
import {
Box,
Button,
@@ -15,6 +15,7 @@ import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/auth
// 配置常量
const POLL_INTERVAL = 2000; // 轮询间隔：2秒
const QR_CODE_TIMEOUT = 300000; // 二维码超时：5分钟
const ENABLE_MOCK = 'true'; // 通过环境变量控制 mock
export default function WechatRegister() {
// 状态管理
@@ -22,11 +23,13 @@ export default function WechatRegister() {
const [wechatSessionId, setWechatSessionId] = useState("");
const [wechatStatus, setWechatStatus] = useState(WECHAT_STATUS.NONE);
const [isLoading, setIsLoading] = useState(false);
const [scale, setScale] = useState(1); // iframe 缩放比例
// 使用 useRef 管理定时器，避免闭包问题和内存泄漏
const pollIntervalRef = useRef(null);
const timeoutRef = useRef(null);
const isMountedRef = useRef(true); // 追踪组件挂载状态
const containerRef = useRef(null); // 容器DOM引用
const navigate = useNavigate();
const toast = useToast();
@@ -189,9 +192,42 @@ export default function WechatRegister() {
* 获取微信二维码
*/
const getWechatQRCode = async () => {
debugger
try {
setIsLoading(true);
// 开发环境：使用 mock 数据
if (ENABLE_MOCK) {
console.log('🔧 开发模式：使用 Mock 数据');
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 500));
// 检查组件是否已卸载
if (!isMountedRef.current) return;
// Mock 数据 - 使用一个测试页面
const mockResponse = {
auth_url: 'https://open.weixin.qq.com/connect/qrconnect?appid=mock&redirect_uri=mock&response_type=code&scope=snsapi_login&state=mock#wechat_redirect',
session_id: 'mock-session-' + Date.now()
};
setWechatAuthUrl(mockResponse.auth_url);
setWechatSessionId(mockResponse.session_id);
setWechatStatus(WECHAT_STATUS.WAITING);
toast({
title: "Mock 模式",
description: "正在使用测试数据展示",
status: "info",
duration: 2000,
});
// 不启动轮询（避免无效请求）
return;
}
// 生产环境：调用真实 API
const response = await authService.getWechatQRCode();
// 检查组件是否已卸载
@@ -236,6 +272,46 @@ export default function WechatRegister() {
};
}, [clearTimers]);
/**
* 测量容器尺寸并计算缩放比例
*/
useLayoutEffect(() => {
// 微信授权页面的原始尺寸
const ORIGINAL_WIDTH = 600;
const ORIGINAL_HEIGHT = 800;
const calculateScale = () => {
if (containerRef.current) {
const { width, height } = containerRef.current.getBoundingClientRect();
// 计算宽高比例，取较小值确保完全适配
const scaleX = width / ORIGINAL_WIDTH;
const scaleY = height / ORIGINAL_HEIGHT;
const newScale = Math.min(scaleX, scaleY, 1.0); // 最大不超过1.0
// 设置最小缩放比例为0.3，避免过小
setScale(Math.max(newScale, 0.3));
}
};
// 初始计算
calculateScale();
// 使用 ResizeObserver 监听容器尺寸变化
const resizeObserver = new ResizeObserver(() => {
calculateScale();
});
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
// 清理
return () => {
resizeObserver.disconnect();
};
}, [wechatStatus]); // 当状态变化时重新计算
/**
* 渲染状态提示文本
*/
@@ -246,15 +322,47 @@ export default function WechatRegister() {
return (
<Text fontSize="xs" color="gray.500">
{STATUS_MESSAGES[wechatStatus] || STATUS_MESSAGES[WECHAT_STATUS.WAITING]}
{STATUS_MESSAGES[wechatStatus]}
</Text>
);
};
return (
<VStack spacing={2}>
<VStack spacing={2} display="flex" alignItems="center" justifyContent="center">
{wechatStatus === WECHAT_STATUS.WAITING ? (
<>
<Text fontSize="lg" fontWeight="bold" color="gray.700" whiteSpace="nowrap">
微信扫一扫
微信扫码
</Text>
<Box
ref={containerRef}
position="relative"
width="150px"
height="100px"
maxWidth="100%"
display="flex"
alignItems="center"
justifyContent="center"
overflow="hidden"
>
<iframe
src={wechatAuthUrl}
width="300"
height="350"
style={{
borderRadius: '8px',
border: 'none',
transform: `scale(${scale})`,
transformOrigin: 'center center'
}}
/>
</Box>
{renderStatusText()}
</>
) : (
<>
<Text fontSize="lg" fontWeight="bold" color="gray.700" whiteSpace="nowrap">
微信扫码
</Text>
<Box
@@ -265,18 +373,7 @@ export default function WechatRegister() {
justifyContent="center"
>
{/* 灰色二维码底图 - 始终显示 */}
{wechatStatus === WECHAT_STATUS.WAITING ? (
<Box position="relative" width="96px" height="96px">
<iframe
src={wechatAuthUrl}
width="96"
height="96"
style={{ borderRadius: '8px', border: 'none' }}
/>
</Box>
) : (
<Icon as={FaQrcode} w={24} h={24} color="gray.300" />
)}
{/* 加载动画 */}
{isLoading && (
@@ -335,7 +432,9 @@ export default function WechatRegister() {
</Box>
{/* 扫码状态提示 */}
{renderStatusText()}
{/* {renderStatusText()} */}
</>
)}
</VStack>
);
}

18
src/components/ProtectedRoute.js
View File

@@ -36,22 +36,10 @@ const ProtectedRoute = ({ children }) => {
);
}
// 未登录时显示占位符（弹窗会自动打开）
// 未登录时，渲染子组件 + 自动打开弹窗（通过 useEffect）
// 弹窗会在 useEffect 中自动触发，页面正常显示
if (!isAuthenticated || !user) {
return (
<Box
height="100vh"
display="flex"
alignItems="center"
justifyContent="center"
bg="gray.50"
>
<VStack spacing={4}>
<Spinner size="xl" color="blue.500" thickness="4px" />
<Text fontSize="lg" color="gray.600">请先登录...</Text>
</VStack>
</Box>
);
return children;
}
// 已登录，渲染子组件

2
src/components/contexts/AuthContext.js
View File

@@ -5,7 +5,7 @@ import { useToast } from '@chakra-ui/react';
// API基础URL配置
const isProduction = process.env.NODE_ENV === 'production';
const API_BASE_URL = isProduction ? "" : process.env.REACT_APP_API_URL || "http://49.232.185.254:5000";
const API_BASE_URL = isProduction ? "" : process.env.REACT_APP_API_URL || "http://49.232.185.254:5001";
// 创建认证上下文
const AuthContext = createContext();

6
src/contexts/AuthContext.js
View File

@@ -22,7 +22,7 @@ export const useAuth = () => {
// 认证提供者组件
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(false); // ⚡ 改为 false，不阻塞首屏渲染
const [isLoading, setIsLoading] = useState(true); // ⚡ 串行执行，阻塞渲染直到 Session 检查完成
const [isAuthenticated, setIsAuthenticated] = useState(false);
const navigate = useNavigate();
const toast = useToast();
@@ -66,8 +66,10 @@ export const AuthProvider = ({ children }) => {
// 网络错误或超时，设置为未登录状态
setUser(null);
setIsAuthenticated(false);
} finally {
// ⚡ Session 检查完成后，停止加载状态
setIsLoading(false);
}
// ⚡ 移除 finally 中的 setIsLoading(false)，不再阻塞渲染
};
// ⚡ 初始化时检查Session - 并行执行，不阻塞页面渲染

30
src/contexts/AuthModalContext.js
View File

@@ -1,5 +1,7 @@
// src/contexts/AuthModalContext.js
import { createContext, useContext, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './AuthContext';
const AuthModalContext = createContext();
@@ -19,6 +21,9 @@ export const useAuthModal = () => {
* 管理统一的认证弹窗状态（登录/注册合并）
*/
export const AuthModalProvider = ({ children }) => {
const navigate = useNavigate();
const { isAuthenticated } = useAuth();
// 弹窗状态（统一的认证弹窗）
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
@@ -41,12 +46,18 @@ export const AuthModalProvider = ({ children }) => {
/**
* 关闭认证弹窗
* 如果用户未登录，跳转到首页
*/
const closeModal = useCallback(() => {
setIsAuthModalOpen(false);
setRedirectUrl(null);
setOnSuccessCallback(null);
}, []);
// ⭐ 如果用户关闭弹窗时仍未登录，跳转到首页
if (!isAuthenticated) {
navigate('/home');
}
}, [isAuthenticated, navigate]);
/**
* 登录/注册成功处理
@@ -62,17 +73,12 @@ export const AuthModalProvider = ({ children }) => {
}
}
// 如果有重定向URL，则跳转
if (redirectUrl) {
// 使用 window.location.href 确保完整刷新页面状态
setTimeout(() => {
window.location.href = redirectUrl;
}, 500); // 延迟500ms，让用户看到成功提示
}
// 关闭弹窗
closeModal();
}, [onSuccessCallback, redirectUrl, closeModal]);
// ⭐ 登录成功后，只关闭弹窗，留在当前页面（不跳转）
// 移除了原有的 redirectUrl 跳转逻辑
setIsAuthModalOpen(false);
setRedirectUrl(null);
setOnSuccessCallback(null);
}, [onSuccessCallback]);
/**
* 提供给子组件的上下文值

2
src/views/Authentication/SignIn/SignInIllustration.js
View File

@@ -34,7 +34,7 @@ import WechatRegister from "../../../components/Auth/WechatRegister";
// API配置
const isProduction = process.env.NODE_ENV === 'production';
const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5000";
const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5001";
export default function SignInIllustration() {
const navigate = useNavigate();

4
src/views/Settings/SettingsPage.js
View File

@@ -119,7 +119,7 @@ export default function SettingsPage() {
try {
const API_BASE_URL = process.env.NODE_ENV === 'production'
? ""
: process.env.REACT_APP_API_URL || "http://49.232.185.254:5000";
: process.env.REACT_APP_API_URL || "http://49.232.185.254:5001";
const response = await fetch(`${API_BASE_URL}/api/account/password-status`, {
method: 'GET',
@@ -188,7 +188,7 @@ export default function SettingsPage() {
// 调用后端API修改密码
const API_BASE_URL = process.env.NODE_ENV === 'production'
? ""
: process.env.REACT_APP_API_URL || "http://49.232.185.254:5000";
: process.env.REACT_APP_API_URL || "http://49.232.185.254:5001";
const response = await fetch(`${API_BASE_URL}/api/account/change-password`, {
method: 'POST',