Vue 3生命周期钩子不能主控登录态失效重定向,因缺乏全局响应能力;路由守卫(router.beforeEach)是第一道防线,axios响应拦截器兜底处理运行时失效,组件内仅作敏感页面的轻量二次校验。

Vue 3 生命周期钩子本身不直接处理登录状态失效的重定向拦截——它缺乏全局响应能力和状态感知时机。真正起作用的是路由守卫(router.beforeEach)和请求拦截器(axios 响应拦截器),生命周期钩子仅适合做局部、组件级的补充判断,比如进入某个敏感页面时再确认一次权限。
为什么不能依赖 onMounted 或 setup 里的逻辑做主拦截
原因很实际:
- 用户可能直接在浏览器地址栏输入受保护路径,组件还没创建,onMounted 根本不会执行
- setup 执行时 token 可能还“看起来有效”,但服务端已踢出,仅靠本地时间戳校验不可靠
- 刷新页面后,组件重建,但登录态是否失效需立刻响应,不能等组件挂载完成才检查
真正有效的拦截入口是路由守卫
在 router/index.ts 中配置全局前置守卫,这是拦截的第一道也是最关键的防线:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 检查目标路由是否需要认证(如
meta: { requiresAuth: true }) - 读取 Pinia store 中的
token和isKicked标志(不是只看 localStorage) - 若 token 为空、过期,或已被标记为“被踢出”,立即
next('/login') - 同时带上
redirect参数:next({ path: '/login', query: { redirect: to.fullPath } })
axios 响应拦截器补位兜底
路由守卫无法捕获用户已在页面内操作时 token 突然失效的情况(例如被别处登录踢下线)。这时靠 axios 拦截 401 或自定义错误码:
立即学习“前端免费学习笔记(深入)”;
- 在响应拦截器中判断
error.response?.status === 401或error.response?.data.code === 'ERR_TOKEN_KICKED' - 触发统一登出动作:
useUserStore().clearAuth()(清 token、清 userInfo、重置请求头) - 跳转登录页,并保留原路径:
router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
组件内可做轻量二次校验(非必须,但推荐)
如果某个页面对登录态极其敏感(如支付确认页),可在 onBeforeRouteEnter 或 onActivated(配合 keep-alive)里加一层检查:
- 调用
useUserStore().checkSession()主动发起一次轻量会话校验接口 - 失败时手动
router.push('/login'),并提示「登录状态异常,请重新验证」 - 注意避免重复弹窗或跳转冲突,这类检查应设防抖且只在必要场景启用

















