Vue路由守卫实现权限验证的核心是三类守卫分层协作：全局前置守卫负责登录态与角色校验，路由独享守卫处理敏感路径专属鉴权，组件内守卫响应交互级权限逻辑，配合meta元信息和动态路由形成闭环控制。
Vue.js 路由守卫实现权限验证，核心是拦截导航、分层校验、精准放行。它不是写一个 if 判断就完事，而是靠三类守卫各司其职，配合路由元信息（meta）和用户状态，形成闭环控制。
全局前置守卫：统一拦截入口
这是所有跳转必经的第一关，负责基础身份判断和通用权限过滤。
- 从 localStorage、Pinia 或 Vuex 中读取 token 和用户角色信息
- 检查目标路由 to.meta.requiresAuth 是否为 true；若需登录但无有效凭证，调用 next('/login') 并携带 redirect 参数
- 对 /login、/404 等白名单路径直接 next()，避免重定向死循环
- 已登录时，比对 to.meta.roles（如 ['admin', 'editor']）是否包含当前用户角色，不匹配则 next('/403')
路由独享守卫：敏感路径专属校验
当某条路由需要独立、强约束的权限逻辑（比如“删除订单”仅限拥有 scope:order:delete 的用户），就该用 beforeEnter，不污染全局逻辑。
- 在对应路由配置中直接定义 beforeEnter 函数
- 可同步调用本地权限方法，如 hasPermission('user:delete')
- 也支持异步校验：例如 await api.checkResourceAccess(to.params.id)，等接口返回再决定是否放行
- 校验失败统一跳转 next('/403')，成功则 next()
组件内守卫：响应组件级交互行为
有些权限动作与组件状态深度绑定，必须下沉到组件内部处理。
立即学习“前端免费学习笔记（深入）”；
- beforeRouteEnter：组件创建前触发，适合做资源归属预检（如“该文章是否属于当前用户”）
- beforeRouteUpdate：同一组件内参数变更时触发，比如详情页 ID 改变，需重新拉数据并校验操作权
- beforeRouteLeave：用户试图离开时触发，结合表单 dirty 状态，调用 next(false) 阻止未保存就退出
配套机制：让权限真正落地
守卫只是执行者，真正让权限“活起来”的是元信息设计与动态路由能力。
- 在路由配置中设置 meta: { requiresAuth: true, roles: ['admin'], permissions: ['post:create'] }，作为守卫判断依据
- 登录后根据后端返回的菜单/权限列表，调用 router.addRoute() 或 router.resetRoutes() 动态生成可访问路由
- 配合 NProgress 等加载指示器，在守卫中控制进度条启停，提升权限跳转体验
