Merge branch 'feature_2025/1028_bugfix' into feature

2025-10-28 19:41:20 +08:00
parent 71df2b605b d456c3cd5f
commit 542b20368e
3 changed files with 80 additions and 81 deletions
--- a/src/components/Auth/WechatRegister.js
+++ b/src/components/Auth/WechatRegister.js
@@ -15,6 +15,8 @@ import { FaQrcode } from "react-icons/fa";
 import { FiAlertCircle } from "react-icons/fi";
 import { useNavigate } from "react-router-dom";
 import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService";
+import { useAuthModal } from "../../contexts/AuthModalContext";
+import { useAuth } from "../../contexts/AuthContext";
 import { logger } from "../../utils/logger";

 // 配置常量
@@ -45,6 +47,10 @@ const getStatusText = (status) => {
 };

 export default function WechatRegister() {
+    // 获取关闭弹窗方法
+    const { closeModal } = useAuthModal();
+    const { refreshSession } = useAuth();
+
    // 状态管理
    const [wechatAuthUrl, setWechatAuthUrl] = useState("");
    const [wechatSessionId, setWechatSessionId] = useState("");
@@ -58,6 +64,7 @@ export default function WechatRegister() {
    const timeoutRef = useRef(null);
    const isMountedRef = useRef(true); // 追踪组件挂载状态
    const containerRef = useRef(null); // 容器DOM引用
+    const sessionIdRef = useRef(null); // 存储最新的 sessionId，避免闭包陷阱

    const navigate = useNavigate();
    const toast = useToast();
@@ -90,6 +97,7 @@ export default function WechatRegister() {

    /**
     * 清理所有定时器
+     * 注意：不清理 sessionIdRef，因为 startPolling 时也会调用此函数
     */
    const clearTimers = useCallback(() => {
        if (pollIntervalRef.current) {
@@ -128,16 +136,14 @@ export default function WechatRegister() {
                }

                showSuccess(
-                    status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "注册成功",
-                    "正在跳转..."
+                    status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "欢迎回来！"
                );

-                logger.info('WechatRegister', '准备跳转到首页');
+                // 刷新 AuthContext 状态
+                await refreshSession();

-                // 延迟跳转，让用户看到成功提示
-                setTimeout(() => {
-                    navigate("/home");
-                }, 1000);
+                // 关闭认证弹窗，留在当前页面
+                closeModal();
            } else {
                throw new Error(response?.error || '登录失败');
            }
@@ -145,17 +151,27 @@ export default function WechatRegister() {
            logger.error('WechatRegister', 'handleLoginSuccess', error, { sessionId });
            showError("登录失败", error.message || "请重试");
        }
-    }, [navigate, showSuccess, showError]);
+    }, [showSuccess, showError, closeModal, refreshSession]);

    /**
     * 检查微信扫码状态
+     * 使用 sessionIdRef.current 避免闭包陷阱
     */
    const checkWechatStatus = useCallback(async () => {
-        // 检查组件是否已卸载
-        if (!isMountedRef.current || !wechatSessionId) return;
+        // 检查组件是否已卸载，使用 ref 获取最新的 sessionId
+        if (!isMountedRef.current || !sessionIdRef.current) {
+            logger.debug('WechatRegister', 'checkWechatStatus 跳过', {
+                isMounted: isMountedRef.current,
+                hasSessionId: !!sessionIdRef.current
+            });
+            return;
+        }
+
+        const currentSessionId = sessionIdRef.current;
+        logger.debug('WechatRegister', '检查微信状态', { sessionId: currentSessionId });

        try {
-            const response = await authService.checkWechatStatus(wechatSessionId);
+            const response = await authService.checkWechatStatus(currentSessionId);

            // 安全检查：确保 response 存在且包含 status
            if (!response || typeof response.status === 'undefined') {
@@ -164,6 +180,7 @@ export default function WechatRegister() {
            }

            const { status } = response;
+            logger.debug('WechatRegister', '微信状态', { status });

            logger.debug('WechatRegister', '检测到微信状态', {
                sessionId: wechatSessionId.substring(0, 8) + '...',
@@ -180,23 +197,14 @@ export default function WechatRegister() {
            if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
                logger.info('WechatRegister', '检测到登录成功状态，停止轮询', { status });
                clearTimers(); // 停止轮询
+                sessionIdRef.current = null; // 清理 sessionId

-                // 显示"扫码成功，登录中"提示
-                if (isMountedRef.current) {
-                    toast({
-                        title: "扫码成功",
-                        description: "正在登录，请稍候...",
-                        status: "info",
-                        duration: 2000,
-                        isClosable: false,
-                    });
-                }
-
-                await handleLoginSuccess(wechatSessionId, status);
+                await handleLoginSuccess(currentSessionId, status);
            }
            // 处理过期状态
            else if (status === WECHAT_STATUS.EXPIRED) {
                clearTimers();
+                sessionIdRef.current = null; // 清理 sessionId
                if (isMountedRef.current) {
                    toast({
                        title: "授权已过期",
@@ -208,11 +216,12 @@ export default function WechatRegister() {
                }
            }
        } catch (error) {
-            logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: wechatSessionId });
+            logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: currentSessionId });
            // 轮询过程中的错误不显示给用户，避免频繁提示
            // 但如果错误持续发生，停止轮询避免无限重试
            if (error.message.includes('网络连接失败')) {
                clearTimers();
+                sessionIdRef.current = null; // 清理 sessionId
                if (isMountedRef.current) {
                    toast({
                        title: "网络连接失败",
@@ -224,12 +233,17 @@ export default function WechatRegister() {
                }
            }
        }
-    }, [wechatSessionId, handleLoginSuccess, clearTimers, toast]);
+    }, [handleLoginSuccess, clearTimers, toast]);

    /**
     * 启动轮询
     */
    const startPolling = useCallback(() => {
+        logger.debug('WechatRegister', '启动轮询', {
+            sessionId: sessionIdRef.current,
+            interval: POLL_INTERVAL
+        });
+
        // 清理旧的定时器
        clearTimers();

@@ -240,7 +254,9 @@ export default function WechatRegister() {

        // 设置超时
        timeoutRef.current = setTimeout(() => {
+            logger.debug('WechatRegister', '二维码超时');
            clearTimers();
+            sessionIdRef.current = null; // 清理 sessionId
            setWechatStatus(WECHAT_STATUS.EXPIRED);
        }, QR_CODE_TIMEOUT);
    }, [checkWechatStatus, clearTimers]);
@@ -267,10 +283,17 @@ export default function WechatRegister() {
                throw new Error(response.message || '获取二维码失败');
            }

+            // 同时更新 ref 和 state，确保轮询能立即读取到最新值
+            sessionIdRef.current = response.data.session_id;
            setWechatAuthUrl(response.data.auth_url);
            setWechatSessionId(response.data.session_id);
            setWechatStatus(WECHAT_STATUS.WAITING);

+            logger.debug('WechatRegister', '获取二维码成功', {
+                sessionId: response.data.session_id,
+                authUrl: response.data.auth_url
+            });
+
            // 启动轮询检查扫码状态
            startPolling();
        } catch (error) {
@@ -306,43 +329,10 @@ export default function WechatRegister() {
        return () => {
            isMountedRef.current = false;
            clearTimers();
+            sessionIdRef.current = null; // 清理 sessionId
        };
    }, [clearTimers]);

-    /**
-     * 备用轮询机制 - 防止丢失状态
-     * 每3秒检查一次，仅在获取到二维码URL且状态为waiting时执行
-     */
-    useEffect(() => {
-        // 只在有auth_url、session_id且状态为waiting时启动备用轮询
-        if (wechatAuthUrl && wechatSessionId && wechatStatus === WECHAT_STATUS.WAITING) {
-            logger.debug('WechatRegister', '备用轮询：启动备用轮询机制');
-
-            backupPollIntervalRef.current = setInterval(() => {
-                try {
-                    if (wechatStatus === WECHAT_STATUS.WAITING && isMountedRef.current) {
-                        logger.debug('WechatRegister', '备用轮询：检查微信状态');
-                        // 添加 .catch() 静默处理异步错误，防止被 ErrorBoundary 捕获
-                        checkWechatStatus().catch(error => {
-                            logger.warn('WechatRegister', '备用轮询检查失败（静默处理）', { error: error.message });
-                        });
-                    }
-                } catch (error) {
-                    // 捕获所有同步错误，防止被 ErrorBoundary 捕获
-                    logger.warn('WechatRegister', '备用轮询执行出错（静默处理）', { error: error.message });
-                }
-            }, BACKUP_POLL_INTERVAL);
-        }
-
-        // 清理备用轮询
-        return () => {
-            if (backupPollIntervalRef.current) {
-                clearInterval(backupPollIntervalRef.current);
-                backupPollIntervalRef.current = null;
-            }
-        };
-    }, [wechatAuthUrl, wechatSessionId, wechatStatus, checkWechatStatus]);
-
    /**
     * 测量容器尺寸并计算缩放比例
     */
@@ -410,7 +400,7 @@ export default function WechatRegister() {
                textAlign="center"
                mb={3}                     // 12px底部间距
            >
-                微信扫码
+                微信登陆
            </Heading>

            {/* ========== 二维码区域 ========== */}
@@ -427,19 +417,26 @@ export default function WechatRegister() {
                bg="gray.50"
                boxShadow="sm"             // ✅ 添加轻微阴影
            >
-                {wechatStatus === WECHAT_STATUS.WAITING ? (
+                {wechatStatus !== WECHAT_STATUS.NONE ? (
                    /* 已获取二维码：显示iframe */
                    <iframe
                        src={wechatAuthUrl}
                        title="微信扫码登录"
                        width="300"
                        height="350"
+                        scrolling="no"  // ✅ 新增:禁止滚动         
                        style={{
                            border: 'none',
-                            transform: 'scale(0.77) translateY(-20px)',  // ✅ 裁剪顶部logo
+                            transform: 'scale(0.77) translateY(-35px)',  // ✅ 裁剪顶部logo
                            transformOrigin: 'top left',
-                            marginLeft: '-5px'
+                            marginLeft: '-5px',
+                            pointerEvents: 'auto',  // 允许点击                                                                                                     │ │
+                            overflow: 'hidden',      // 尝试隐藏滚动条（可能不起作用）    
                        }}
+                        // 使用 onWheel 事件阻止滚动                                                                                                                │ │
+                        onWheel={(e) => e.preventDefault()}  // ✅ 在父容器上阻止滚动
+                        onTouchMove={(e) => e.preventDefault()}  // ✅ 移动端也阻止
+                        
                    />
                ) : (
                    /* 未获取：显示占位符 */
--- a/src/mocks/handlers/auth.js
+++ b/src/mocks/handlers/auth.js
@@ -136,7 +136,9 @@ export const authHandlers = [
        });

        // 模拟微信授权 URL（实际是微信的 URL）
-        const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=mock&redirect_uri=&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;
+        // 使用真实的微信 AppID 和真实的授权回调地址（必须与微信开放平台配置的域名一致）
+        const mockRedirectUri = encodeURIComponent('http://valuefrontier.cn/api/auth/wechat/callback');
+        const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=wxa8d74c47041b5f87&redirect_uri=${mockRedirectUri}&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;

        console.log('[Mock] 生成微信二维码:', { sessionId, authUrl });

@@ -147,16 +149,16 @@ export const authHandlers = [
                session.status = 'scanned';
                console.log(`[Mock] 模拟用户扫码: ${sessionId}`);

-                // 再过2秒自动确认登录
+                // 再过5秒自动确认登录（延长时间让用户看到 scanned 状态）
                setTimeout(() => {
                    const session2 = mockWechatSessions.get(sessionId);
                    if (session2 && session2.status === 'scanned') {
-                        session2.status = 'confirmed';
+                        session2.status = 'authorized';  // ✅ 使用 'authorized' 状态，与后端保持一致
                        session2.user = {
                            id: 999,
                            nickname: '微信用户',
                            wechat_openid: 'mock_openid_' + sessionId,
-                            avatar_url: 'https://i.pravatar.cc/150?img=99',
+                            avatar_url: 'https://ui-avatars.com/api/?name=微信用户&size=150&background=4299e1&color=fff',
                            phone: null,
                            email: null,
                            has_wechat: true,
@@ -168,6 +170,7 @@ export const authHandlers = [
                            is_subscription_active: true,
                            subscription_days_left: 0
                        };
+                        session2.user_info = { user_id: session2.user.id };  // ✅ 添加 user_info 字段
                        console.log(`[Mock] 模拟用户确认登录: ${sessionId}`, session2.user);
                    }
                }, 2000);
@@ -185,7 +188,7 @@ export const authHandlers = [
    }),

    // 4. 检查微信扫码状态
-    http.post('/api/auth/wechat/check-status', async ({ request }) => {
+    http.post('/api/auth/wechat/check', async ({ request }) => {
        await delay(200); // 轮询请求，延迟短一些

        const body = await request.json();
@@ -209,18 +212,16 @@ export const authHandlers = [

        console.log('[Mock] 检查微信状态:', { session_id, status: session.status });

+        // ✅ 返回与后端真实 API 一致的扁平化数据结构
        return HttpResponse.json({
-            code: 0,
-            message: '成功',
-            data: {
-                status: session.status,
-                user: session.user
-            }
+            status: session.status,
+            user_info: session.user_info,
+            expires_in: Math.floor((session.createdAt + 5 * 60 * 1000 - Date.now()) / 1000)
        });
    }),

    // 5. 微信登录确认
-    http.post('/api/auth/wechat/login', async ({ request }) => {
+    http.post('/api/auth/login/wechat', async ({ request }) => {
        await delay(NETWORK_DELAY);

        const body = await request.json();
@@ -228,7 +229,7 @@ export const authHandlers = [

        const session = mockWechatSessions.get(session_id);

-        if (!session || session.status !== 'confirmed') {
+        if (!session || session.status !== 'authorized') {  // ✅ 使用 'authorized' 状态，与前端保持一致
            return HttpResponse.json({
                success: false,
                error: '微信登录未确认或已过期'
@@ -386,12 +387,12 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
        setTimeout(() => {
            const session2 = mockWechatSessions.get(targetSessionId);
            if (session2 && session2.status === 'scanned') {
-                session2.status = 'confirmed';
+                session2.status = 'authorized';  // ✅ 使用 'authorized' 状态，与自动扫码流程保持一致
                session2.user = {
                    id: 999,
                    nickname: '微信测试用户',
                    wechat_openid: 'mock_openid_' + targetSessionId,
-                    avatar_url: 'https://i.pravatar.cc/150?img=99',
+                    avatar_url: 'https://ui-avatars.com/api/?name=微信测试用户&size=150&background=4299e1&color=fff',
                    phone: null,
                    email: null,
                    has_wechat: true,
@@ -402,6 +403,7 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
                    is_subscription_active: true,
                    subscription_days_left: 0
                };
+                session2.user_info = { user_id: session2.user.id };  // ✅ 添加 user_info 字段
                console.log(`[Mock API] ✅ 模拟确认登录: ${targetSessionId}`, session2.user);
            }
        }, 1000);
--- a/src/services/authService.js
+++ b/src/services/authService.js
@@ -144,8 +144,8 @@ export const WECHAT_STATUS = {
    WAITING: 'waiting',
    SCANNED: 'scanned',
    AUTHORIZED: 'authorized',
-    LOGIN_SUCCESS: 'login_success',
-    REGISTER_SUCCESS: 'register_success',
+    LOGIN_SUCCESS: 'authorized',        // ✅ 与后端保持一致，统一使用 'authorized'
+    REGISTER_SUCCESS: 'authorized',     // ✅ 与后端保持一致，统一使用 'authorized'
    EXPIRED: 'expired',
 };

@@ -153,7 +153,7 @@ export const WECHAT_STATUS = {
 * 状态提示信息映射
 */
 export const STATUS_MESSAGES = {
-    [WECHAT_STATUS.WAITING]: '请使用微信扫码',
+    [WECHAT_STATUS.WAITING]: '使用微信扫一扫登陆',
    [WECHAT_STATUS.SCANNED]: '扫码成功，请在手机上确认',
    [WECHAT_STATUS.AUTHORIZED]: '授权成功，正在登录...',
    [WECHAT_STATUS.EXPIRED]: '二维码已过期',