122 lines
4.2 KiB
Markdown
122 lines
4.2 KiB
Markdown
|
# 微信授权重定向问题分析与修复
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
微信授权回调成功后，虽然 `pendingRoute` 有正确的值，回调成功也能跳转到应该到达的页面（如 `promotionInquire`），但在加载该页面后，又会自动跳转到首页。
|
|||
|
|
|
|||
|
|
## 根本原因分析
|
|||
|
|
|
|||
|
|
### 问题 1: pendingRoute 清除时序错误 ❌
|
|||
|
|
**位置**: `src/App.vue` 第 69-72 行
|
|||
|
|
|
|||
|
|
**原始代码**:
|
|||
|
|
```javascript
|
|||
|
|
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 中的时序问题
|
|||
|
|
```javascript
|
|||
|
|
if (pendingRoute) {
|
|||
|
|
// ✅ 先跳转
|
|||
|
|
await router.replace(pendingRoute);
|
|||
|
|
// ✅ 再清除
|
|||
|
|
authStore.clearPendingRoute();
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### ✅ 修复 2: 路由守卫的防护检查
|
|||
|
|
在路由守卫中增加：
|
|||
|
|
```javascript
|
|||
|
|
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 中的延迟处理
|
|||
|
|
添加延迟以确保页面完全加载后再进行任何路由跳转：
|
|||
|
|
```javascript
|
|||
|
|
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. 状态同步不完整可能导致恢复失败
|
|||
|
|
|
|||
|
|
通过修复这些问题，应该能够确保微信授权后正确重定向到目标页面。
|