要实现 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 的响应式状态，逻辑更清晰、调试更方便。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 对所有带
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()，再跳转，避免守卫滞后
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
