Vue 路由守卫：页面访问权限控制的实现

Vue路由守卫是权限控制的必备防线，分三层：全局前置守卫（登录态/白名单/角色校验）、路由独享守卫（敏感路径专属鉴权）、组件内守卫（离开确认/参数变更刷新），配合meta与动态路由实现精准可控的权限体系。

Vue 路由守卫是控制页面访问权限的核心机制，不是可选功能，而是必须落地的防线。它通过拦截导航过程，在跳转前校验身份与权限，决定是否放行、重定向或拒绝。关键不在于堆砌逻辑，而在于分层分工——不同守卫各管一段，才能既安全又可控。

全局前置守卫：守好第一道门

这是所有路由跳转必经的统一入口，适合做登录态检查、白名单放行、基础角色判断。它在 router/index.js 中注册，执行顺序最早，影响范围最广。

• 从 localStorage 或 Pinia 读取 token 或用户信息，确认是否已登录
• 若目标路由 meta.requiresAuth 为 true，但无有效凭证，调用 next('/login') 并携带 redirect 参数，方便登录后回跳
• 对 /login、/404 等白名单路径直接 next()，避免循环重定向
• 已登录时，进一步检查 to.meta.roles 是否包含当前用户角色，不匹配则 next('/403')

路由独享守卫：给敏感页面配专属门禁

当某条路由需要特殊权限策略（比如仅限管理员删除订单），就不该塞进全局守卫里写一堆 if-else。beforeEnter 直接定义在对应路由配置中，逻辑更聚焦、维护更清晰。

• 在 routes 数组中该路由对象内添加 beforeEnter 函数
• 函数内可调用具体权限方法，例如 checkPermission('order:delete') 或 await api.checkScope(to.params.id)
• 校验失败时 next('/403')，成功则 next()
• 支持异步等待，适合需实时接口校验的场景

组件内守卫：管好离开和刷新的细节

有些权限逻辑和组件状态强绑定，比如编辑页未保存时禁止离开、详情页 ID 变更后需重新鉴权并拉取数据。这类行为无法靠路由元信息覆盖，必须下沉到组件内部。

立即学习“前端免费学习笔记（深入）”；

• beforeRouteEnter 在组件实例创建前触发，适合做进入前预检（如检查资源归属）
• beforeRouteUpdate 在同一组件内参数变化时触发，可用于刷新数据+二次权限校验
• beforeRouteLeave 在用户试图离开当前组件时触发，配合表单 dirty 状态阻止误操作
• 三者都通过 next 控制流程，其中 beforeRouteLeave 可传 false 阻止导航

配合元信息与动态路由：让权限真正活起来

单纯拦截不够，还需让路由结构本身反映权限。meta 字段是桥梁，动态路由是延伸。

• 在路由配置中设置 meta: { roles: ['admin'], requiresAuth: true }，作为守卫判断依据
• 登录后根据用户角色，从后端拉取可访问菜单列表，动态 addRoute 或重置 router.options.routes
• 配合 NProgress 或 loading 状态，让权限过渡有反馈，避免白屏卡顿
• 注意路由复用时 meta 不会自动更新，需在 beforeRouteUpdate 中手动同步