Vue 3生命周期钩子不能主控登录态失效重定向，因缺乏全局响应能力；路由守卫（router.beforeEach）是第一道防线，axios响应拦截器兜底处理运行时失效，组件内仅作敏感页面的轻量二次校验。
Vue 3 生命周期钩子本身不直接处理登录状态失效的重定向拦截——它缺乏全局响应能力和状态感知时机。真正起作用的是路由守卫（router.beforeEach）和请求拦截器（axios 响应拦截器），生命周期钩子仅适合做局部、组件级的补充判断，比如进入某个敏感页面时再确认一次权限。
为什么不能依赖 onMounted 或 setup 里的逻辑做主拦截
原因很实际：
- 用户可能直接在浏览器地址栏输入受保护路径，组件还没创建，onMounted 根本不会执行
- setup 执行时 token 可能还“看起来有效”，但服务端已踢出，仅靠本地时间戳校验不可靠
- 刷新页面后，组件重建，但登录态是否失效需立刻响应，不能等组件挂载完成才检查
真正有效的拦截入口是路由守卫
在 router/index.ts 中配置全局前置守卫，这是拦截的第一道也是最关键的防线：
Springboot Vue Builder
下载
从零开始编排 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')，并提示「登录状态异常，请重新验证」 - 注意避免重复弹窗或跳转冲突，这类检查应设防抖且只在必要场景启用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
