Vue.js中控制页面访问需用路由守卫：一、全局前置守卫（beforeEach）做登录与元信息校验；二、路由独享守卫（beforeEnter）实现细粒度权限控制；三、组件内守卫处理交互级逻辑；四、动态路由结合角色元信息生成权限路由；五、配合NProgress优化权限过渡体验。
如果您在 Vue.js 项目中需要控制用户能否访问特定页面，则必须依赖路由守卫机制对导航过程进行拦截与校验。以下是实现该目标的多种可行方案：
一、全局前置守卫（beforeEach）实现基础鉴权
全局前置守卫是应用启动后每次路由跳转前执行的统一入口，适用于登录状态检查、白名单放行、权限元信息校验等通用逻辑。它在所有路由切换前触发，是权限控制的第一道防线。
1、在 router/index.js 中调用 router.beforeEach 方法注册守卫函数。
2、从 localStorage 或 Pinia/Vuex 中读取 token 或用户角色信息。
立即学习“前端免费学习笔记（深入）”；
3、判断目标路由 to.meta.requiresAuth 是否为 true；若为 true 且无有效凭证，则调用 next('/login') 重定向至登录页。
4、若目标路由属于白名单（如 '/login'、'/404'），直接调用 next() 放行。
5、若已登录且目标路由无需权限，或权限匹配，则调用 next() 继续导航。
二、路由独享守卫（beforeEnter）实现细粒度控制
路由独享守卫仅作用于某一条具体路由配置，避免在全局守卫中堆砌大量 if-else 分支，提升可维护性与可读性。适用于管理员专属路径、敏感操作页面等需单独策略的场景。
1、在 routes 数组中对应路由对象内添加 beforeEnter 函数属性。
2、在函数内部调用自定义权限检查方法，例如 hasAdminRights() 或 checkPermission('delete_user')。
3、若校验通过，调用 next()；否则调用 next('/403') 跳转至无权限提示页。
4、支持异步校验：可在 beforeEnter 中使用 await 等待接口返回权限结果后再决定是否放行。
三、组件内守卫（beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave）处理交互级逻辑
组件内守卫绑定在组件选项或 setup() 中，适用于与组件实例强耦合的权限响应行为，例如表单未保存时离开提醒、参数变更时刷新数据、动态加载子权限模块等。
1、在组件导出对象中定义 beforeRouteEnter 钩子，用于进入组件前的权限预检（此时组件实例不可访问）。
2、使用 beforeRouteUpdate 监听同一组件内路由参数变化，例如 id 更新后重新请求详情并校验当前用户对该资源的操作权。
3、在 beforeRouteLeave 中判断表单是否已修改，若为 true 则调用 next(false) 阻止导航，并弹出确认框。
4、可通过 to.meta.requiredActions 获取目标路由所需的最小操作权限集，在钩子中比对当前用户权限列表。
四、基于动态路由与角色元信息的权限生成方案
该方案将权限控制前移至路由初始化阶段，通过后端返回的用户角色菜单结构动态生成可访问路由表，使前端路由配置本身即具备权限语义，规避运行时频繁守卫判断。
1、用户登录成功后，调用接口获取包含 path、name、component、meta.roles 等字段的路由配置数组。
2、使用 router.addRoute() 或 router.addRoutes()（Vue Router 3）逐条注册受控路由。
3、确保每个动态路由的 meta 字段包含 roles: ['admin', 'editor'] 等权限标识。
4、配合全局 beforeEach 守卫，仅做简单白名单与登录态检查，不再承担角色比对职责，降低守卫复杂度。
五、结合 NProgress 与 Loading 状态的权限过渡体验优化
在权限校验过程中引入视觉反馈，避免用户因异步请求延迟而误判页面卡死，提升交互确定性与专业感。
1、安装并引入 nprogress 库，在 beforeEach 开始时调用 NProgress.start() 显示进度条。
2、在 afterEach 中调用 NProgress.done() 隐藏进度条。
3、若守卫中存在异步权限验证（如调用 checkAccess API），在请求发起前启动加载状态，在 next() 执行后关闭。
4、对拒绝访问的场景（如 403），在 next('/403') 前调用 NProgress.done() 并清除 loading 效果。
