如何在路由守卫中配合 Pinia 实现 Token 自动刷新？生产级认证架构实战-Vue.js-PHP中文网

关键在于守卫中主动补全登录上下文：pinia 认证 store 封装 token 管理与静默刷新逻辑，通过 ref 存储双 token 并初始化自 localstorage，computed istokenexpiring 基于 exp 或 expirestime 提前 5 分钟触发刷新。

如何在路由守卫中配合 pinia 实现 token 自动刷新？生产级认证架构实战

在路由守卫中配合 Pinia 实现 Token 自动刷新，关键不是“拦截后跳转”，而是“守卫中主动补全登录上下文”。它要求前置守卫能感知 token 状态、触发静默刷新、同步用户信息，并优雅处理失败降级。整个流程需与 Pinia 的响应式状态、Axios 拦截器、双 Token 架构协同工作。

认证 Store 是整个流程的数据中枢，必须封装 token 管理、过期判断、刷新逻辑和持久化机制：

使用 ref 存储 accessToken 和 refreshToken，并从 localStorage 初始化（避免刷新丢失）
定义 computed isTokenExpiring：基于 JWT 的 exp 字段或服务端返回的 expiresTime，提前 5 分钟触发刷新（如 expiresTime.value - Date.now() ）
暴露 refreshAuth() 方法：调用后端 refreshToken 接口，成功则更新 accessToken、refreshToken、expiresTime 并写入 localStorage；失败则清空所有凭证
提供 autoLogin() 方法：按顺序检查——token 是否存在 → 是否未过期 → 是否即将过期 → 尝试 refresh → 成功后拉取用户信息 → 全部完成才 resolve；全程返回 Promise，便于守卫 await

全局前置守卫（router.beforeEach）是执行自动刷新的入口点，只对需要认证的路由生效：

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

先判断目标路由是否需要鉴权（例如 meta.requiresAuth === true）
若 authStore.isAuthenticated 为 true 且 !authStore.isTokenExpiring，直接 next()
若 token 即将过期，调用 await authStore.refreshAuth()；成功则继续，失败（如 401/403 或超时）立即 next({ path: '/login', query: { redirect: to.fullPath } })
加入轻量防抖：store 内设 isRefreshing: ref(false)，避免多路由连续进入时重复刷新

路由守卫无法覆盖所有场景（如定时任务、WebSocket 回调、后台 tab 切换后发起的请求），需 Axios 拦截器作为第二道防线：

用户可能在其他标签页登出或 token 被服务端主动吊销，前端需及时响应：

监听 storage 事件：当 localStorage 中的 token 被移除（如另一标签页 logout），本页立即 authStore.clearAuth() 并 router.push('/login')
登录成功后，除写入 store 和 localStorage，还需调用 window.dispatchEvent(new Event('storage')) 主动触发同步（部分浏览器不自动触发跨页事件）
服务端可提供 /auth/status 轻量接口，供前台定期轮询（如每 15 分钟），验证 token 有效性，增强实时性

不复杂但容易忽略：自动刷新的本质是让每次导航都具备“自我修复”能力——无论 token 是过期、丢失还是被吊销，系统都能在用户无感前提下恢复可用状态。Pinia 提供了状态归一和响应式驱动的基础，而路由守卫 + Axios 拦截器共同构成了两层确定性保障。