核心是守卫只调用 pinia store 的 actions/getters 做鉴权决策，不直接读 localstorage、不手动改状态、不发请求；权限获取、存储、动态路由注册等均封装在 store 中，确保状态统一、可追踪、初始化同步。
Vue 路由守卫结合 Pinia 验证用户权限，核心是把权限判断逻辑从守卫里“抽出来”，交给 Pinia store 统一管理。守卫只负责调用 store 的方法或 getter 做决策，不直接读 localStorage、不手动改角色数组、也不在守卫里发请求拉权限——这些都应封装进 store 的 action 或 getter 中。
用 store 实例读取最新权限状态
在守卫中必须通过 useUserStore() 获取 store 实例，而不是缓存旧值或读取本地存储：
- 调用 userStore.getRoles() 或 userStore.permissions（推荐封装为 getter）获取当前角色/权限列表
- 避免直接访问 userStore.$state.roles，尤其在异步加载未完成时可能为空或过期
- 若权限需接口获取（如登录后请求
/api/user/permissions），先检查 userStore.isPermissionsLoaded，未加载完可暂停导航（next(false)）或显示 loading 提示
在守卫中做鉴权决策，不是赋值操作
守卫的职责是“放行、重定向、拦截”，不是“设置权限”：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章