要实现 Vue 路由权限控制中的「未授权重定向」，需联动 Pinia 认证状态与 router.beforeEach：一、Pinia 统一管理 token/role/permissions 并持久化；二、守卫中依据 meta.requiresAuth 和 store.isAuthenticated 拦截跳转；三、登录后校验并还原 redirect 目标页；四、避免刷新失效、权限不同步等陷阱。
要实现 Vue 路由权限控制中的「未授权重定向」，核心是把 Pinia 存储的登录/权限状态与 Vue Router 的全局前置守卫（router.beforeEach）联动起来，在跳转前实时判断是否具备访问资格，并自动跳转到登录页或 403 页面。
一、Pinia 中统一维护认证状态
不依赖 localStorage 或 Cookie 直接读取，而是通过 Pinia 集中管理 token、角色、权限列表等关键字段，确保状态可响应、可追踪、可持久化。
- 定义
useAuthStore，包含token、role、permissions等字段，以及isAuthenticatedgetter 判断登录态 - 登录成功后调用
store.setToken(token, userInfo)，同时写入持久化介质（如 js-cookie 或加密的 localStorage） - 页面刷新时，在
main.ts或路由初始化阶段调用store.restoreFromStorage()恢复状态
二、在 beforeEach 中做未授权拦截
守卫里不再手动查 localStorage，而是直接读取 Pinia store 的响应式状态，逻辑更清晰、调试更方便。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 对所有带
meta.requiresAuth: true的路由，检查store.isAuthenticated - 若未登录，调用
next({ path: '/login', query: { redirect: to.fullPath } })记住原目标地址 - 若已登录但权限不足（比如需 admin 角色），可进一步校验
to.meta.role或to.meta.permission，不匹配则跳/403
三、登录页完成跳转还原
用户登录成功后，不能只跳首页，而应优先返回用户原本想访问的页面，提升体验。
立即学习“前端免费学习笔记（深入）”；
- 在登录组件中读取
route.query.redirect - 登录成功后执行
router.push(redirect || '/dashboard') - 注意对 redirect 做基础校验（如是否为合法路径、是否仍需权限），避免开放重定向漏洞
四、避免常见陷阱
很多项目卡在“刷新后守卫失效”或“权限变了但路由没反应”，问题往往出在状态同步时机。
- 不要在守卫里直接读取非响应式变量（如从 cookie 同步一次就缓存的 role 字符串）
- 动态权限变更（如后台改了角色）后，需触发
store.refreshPermissions()并强制重新校验当前路由 - 服务端返回 401 时，应在 axios 响应拦截器中主动调用
store.logout()，再跳转，避免守卫滞后
