Vue Router导航守卫与权限控制
Vue Router 中导航守卫、meta 与权限校验之间的协作关系。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 相关概念: vue-router, pinia
- 延伸阅读: vue-router-module-design, vue-interview-high-frequency
Vue Router导航守卫与权限控制
在 Vue 项目里，权限控制通常不是单靠路由，也不是单靠状态管理，而是 Router、路由元信息和登录状态一起协作的结果。
为什么要放在一起理解
因为很多项目中的“权限控制”其实包含三件事：
- 这个页面能不能进
- 进入前要不要先跳登录
- 菜单和可见页面要不要按角色过滤
路由守卫在这里做什么
导航守卫主要负责“准入控制”，也就是在页面切换前判断是否允许进入。
meta 在这里做什么
meta 负责承载权限相关语义，比如：
requiresAuthrolekeepAlivetitle
状态管理在这里做什么
像 token、用户信息、角色信息这类共享状态，通常由 pinia 持有；守卫在导航时读取这些状态做判断。
一条典型协作主线
- 进入某个目标路由
- 守卫读取路由
meta - 守卫读取 pinia 中的登录态和权限态
- 决定放行、重定向，或先加载权限信息
常见误区
- 把所有页面数据请求都塞进守卫
- 只校验“有没有 token”，却不区分页面角色权限
- 菜单权限和页面权限完全分离，导致体验不一致
最短记忆方式
路由守卫负责“能不能进”，meta 负责“按什么规则判断”，状态管理负责“当前用户到底是谁”。