第三方社交登录回调后状态管理需统一凭证入口、防重复跳转、保登录态可恢复：回调页仅用code换token并跳转；store与localstorage双驱动同步token和用户信息；路由守卫区分token存在性与用户数据完整性；跳转目标须记录来源路径并安全回跳。
第三方社交账号授权登录回调后的状态管理，核心在于统一凭证入口、避免重复跳转、确保登录态可恢复。Vue 3 本身不处理授权逻辑，但必须配合后端完成 token 获取、本地持久化、路由跳转和状态同步这四件事。
一、回调页只做一件事：拿 code 换 token 并跳转
不要在回调页面（如 /callback）里渲染 UI 或做用户信息展示。它的唯一职责是：
- 从 URL 参数中提取
code（以及可能的state、id_token等） - 调用后端登录接口（如
POST /api/auth/login），传入code和平台标识（provider: 'wechat' | 'google' | 'apple'） - 后端验证成功后返回
{ token, user }，前端立即存入localStorage并跳转到目标页（如首页或上一页）
示例（CallbackView.vue）：
二、登录态必须由 store + localStorage 双驱动
Vuex/Pinia 管理运行时状态，localStorage 保证刷新不丢失。关键点：
- store 初始化时检查
localStorage.getItem('token')，存在则触发fetchUserInfo()补全用户数据 - 所有登录 action（包括第三方回调后）都走同一套
setAuth({ token, user })mutation，统一写入 store 和 localStorage - 退出登录时同步清空 store、localStorage 和 axios 默认 header
不推荐仅靠内存变量或组件 data 存 token —— 页面刷新即失效。
三、路由守卫要区分“未登录”和“已登录但缺用户信息”
常见陷阱：用户已授权并拿到 token，但首次跳转时还没拉取用户资料，导致守卫误判为未登录而反复跳回登录页。
- 在路由守卫中，先判断 token 是否存在；存在则检查
store.state.user是否为空 - 若 token 存在但 user 为空，自动触发
fetchUserInfo()，加载中显示 skeleton，而非强制跳转 - 对
meta.requiresAuth: true的路由，只有 token 不存在时才重定向到登录页
四、跳转目标需带来源记录，避免“登录完回错页”
用户从商品页点击微信登录，授权后应返回商品页，而不是固定跳首页。实现方式：
- 登录按钮处记录当前 fullpath：
localStorage.setItem('redirectAfterLogin', router.currentRoute.value.fullPath) - 回调页换 token 成功后，读取该值并
router.push(redirect || '/')，用完即删 - 若来自外部链接（如公众号菜单），可用
document.referrer做兜底，但需校验域名防 XSS
微信 H5 授权容易陷入循环跳转，本质就是没管好这个来源链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
