企业微信扫码登录回调状态管理需统一收口至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，防止下次进回调页误触发
不复杂但容易忽略
