企业微信扫码登录回调状态管理需统一收口至spa内路由流程，通过pinia维护中间态、路由守卫恢复状态、防抖与请求取消机制保障可靠性。

企业微信扫码登录回调后的状态管理，核心是把“扫码→重定向→取code→换用户信息→更新全局状态”这一链路收口到统一、可预测的流程里。不能靠页面刷新或路由硬跳转来维持状态，否则容易丢失上下文、重复请求、或登录态不一致。

回调页必须是单页应用内路由

不要让企业微信直接跳转到一个纯HTML静态页，而是配置 redirect_uri 为你的 Vue Router 内的一个路径（如 /auth/callback），确保整个流程都在 SPA 上下文中完成。这样你才能用 useRoute().query.code 安全读取参数，也方便后续做状态过渡动画或加载提示。

• 在企业微信管理后台「开发者接口」中，回调域名必须与前端部署域名完全一致，且协议为 HTTPS
• Vue Router 需启用 history 模式，并在服务端配置 fallback（如 Nginx 的 try_files）避免 404
• 该路由组件应设为独立、无布局的轻量页，不触发额外 API 或权限校验

用 Pinia 统一维护登录中间态

扫码登录不是原子操作，它可能卡在“已扫码未授权”“已授权未绑定”“绑定中网络失败”等环节。建议在 Pinia store 中定义明确的状态字段：

• status：枚举值 'idle' | 'loading' | 'scanned' | 'bound' | 'failed'
• authCode：临时缓存 code，防止路由刷新后丢失
• user：登录成功后的用户基础信息（姓名、userid、avatar 等）
• needBindPhone：布尔值，由后端返回，决定是否跳转手机号绑定页

所有状态变更都通过 action 封装，比如 handleCallback(code) 会自动调用 API、处理错误、并 commit 到 store —— 避免在组件内散落逻辑。

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

路由守卫 + 状态恢复机制

用户可能中途刷新回调页，或从分享链接直接进入。这时需要主动检查是否已有有效 code 或已登录态：

• 在 beforeEach 全局守卫中判断：若当前是 /auth/callback 且有 code，但 store 中无 user，则自动触发 handleCallback
• 若已有 user 且 token 未过期，直接 router.replace('/') 跳首页，不二次处理
• 若 code 已失效（后端返回 40010），清空 authCode 并提示“请重新扫码”，同时重置 status 为 idle

避免重复提交与竞态问题

回调页加载时会立刻读取 URL 参数并发起请求，但用户可能快速连点或反复刷新。需加一层防抖和标记：

• 在 store action 中用 ref(false) 标记是否正在处理中，true 时直接 return
• API 请求用 axios.CancelToken 或 AbortController 主动取消上一次未完成的请求
• 成功后立即将 authCode 设为 null，防止下次进回调页误触发

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！