ycc-proxy-webview/微信授权重定向问题分析与修复.md

微信授权重定向问题分析与修复

问题描述

微信授权回调成功后，虽然 pendingRoute 有正确的值，回调成功也能跳转到应该到达的页面（如 promotionInquire），但在加载该页面后，又会自动跳转到首页。

根本原因分析

问题 1: pendingRoute 清除时序错误 ❌

位置: src/App.vue 第 69-72 行

原始代码:

if (pendingRoute) {
    authStore.clearPendingRoute();  // ❌ 先清除
    await router.replace(pendingRoute);  // 用已清空的 null 值跳转
}

问题：

• clearPendingRoute() 将 authStore.pendingRoute 设为 null
• 之后 router.replace(pendingRoute) 使用的是已清空的 null 值
• 导致实际跳转到 undefined 而非目标路由

修复: 先跳转再清除 ✅

问题 2: 路由守卫重复授权防护缺失 ❌

位置: src/router/index.js 第 428-444 行

问题：

• 当用户在授权完成后，路由守卫再次执行时
• 如果 isWeChat.value && !isAuthenticated 条件满足
• 会重新触发授权流程，导致页面跳转

原因:

• authStore.isWeixinAuthing 和 authStore.weixinAuthComplete 状态未被路由守卫检查
• 虽然 token 已保存，但守卫仍可能因某些时序问题再次触发授权

修复: 在路由守卫中增加授权状态检查 ✅

问题 3: localStorage 同步问题

位置: src/stores/authStore.js

问题：

• 清除 pendingRoute 时，可能只清除内存状态，localStorage 可能残留数据
• 页面刷新时恢复的数据可能不完整

修复: 确保内存和 localStorage 同步清除 ✅

修复清单

✅ 修复 1: App.vue 中的时序问题

if (pendingRoute) {
    // ✅ 先跳转
    await router.replace(pendingRoute);
    // ✅ 再清除
    authStore.clearPendingRoute();
}

✅ 修复 2: 路由守卫的防护检查

在路由守卫中增加：

if (isWeChat.value && !isAuthenticated && !isTokenExpired) {
    // ✨ 新增：检查是否正在授权或已完成授权
    if (authStore.isWeixinAuthing || authStore.weixinAuthComplete) {
        console.warn("⚠️ WeChat auth already in progress or completed");
        NProgress.done();
        next();
        return;
    }
    // ... 继续原有逻辑
}

✅ 修复 3: authStore 中的日志和同步

增强 clearPendingRoute() 和 restoreFromStorage() 方法的日志记录和错误处理。

✅ 修复 4: PromotionInquire.vue 中的延迟处理

添加延迟以确保页面完全加载后再进行任何路由跳转：

function isFinishPayment() {
    const query = new URLSearchParams(window.location.search);
    let orderNo = query.get("out_trade_no");
    if (orderNo) {
        // ✨ 延迟 100ms 确保页面加载完成
        setTimeout(() => {
            router.push({ path: "/report", query: { orderNo } });
        }, 100);
    }
}

调试建议

观察日志的关键点：

1. 微信授权开始: 看是否出现 "Triggering WeChat auth from route guard"
2. Token 保存: 看是否出现 "✅ Token saved successfully"
3. 用户信息加载: 看 "✅ User info fetched" 是否成功
4. pendingRoute 获取: 看 "🎯 pendingRoute:" 后面的值
5. 导航执行: 看 "🚀 Navigating to pendingRoute:" 和 "✅ Navigated to pendingRoute"
6. 是否重复授权: 看是否出现 "⚠️ WeChat auth already in progress"

测试步骤：

1. 在微信中打开推广链接: https://xxx.com/agent/promotionInquire/abc123
2. 观察控制台日志，确保看到上述所有成功日志
3. 验证最终页面是 promotionInquire 而非首页

修复文件列表

• ✅ src/App.vue - 修复 pendingRoute 时序问题
• ✅ src/router/index.js - 增强路由守卫防护
• ✅ src/stores/authStore.js - 改进日志和同步
• ✅ src/views/PromotionInquire.vue - 添加延迟处理

总结

这个问题是由多个时序和状态管理问题联合造成的：

1. pendingRoute 被过早清除导致跳转失败
2. 路由守卫缺少防护措施可能重复授权
3. 状态同步不完整可能导致恢复失败

通过修复这些问题，应该能够确保微信授权后正确重定向到目标页面。