Vue路由权限控制的核心是通过静态/动态路由分离、登录后动态添加路由、全局前置守卫拦截及菜单自动渲染，实现角色化页面访问闭环。静态路由含登录页等免权限路径；动态路由带meta.roles声明可访问角色；登录后根据token拉取角色并addRoute添加匹配路由；刷新时需重建；beforeEach守卫校验token与roles；菜单基于当前有效路由自动过滤生成。
Vue 路由权限控制的核心，是让不同角色的用户只能看到、进入自己被允许的页面和菜单。它不是简单地“隐藏按钮”，而是从路由加载、跳转拦截到菜单渲染，形成一套闭环机制。
静态路由与动态路由分离
项目路由必须明确分为两类：
- 静态路由：登录页、404页、重置密码页等无需权限即可访问的路径，初始化时直接注入 router 实例
-
动态路由：后台所有业务页面（如 /dashboard、/user、/settings），每条都带
meta.roles字段，声明允许访问的角色数组，例如roles: ['admin', 'editor']
这种分离保证了未登录用户能正常打开登录页，也避免了权限校验逻辑污染基础路由。
登录后动态添加可访问路由
用户成功登录并拿到 token 后，需立即请求用户信息接口，从中提取角色标识（如 "role": "editor" 或 "roles": ["editor"]）。接着从前端预设的全部动态路由中，筛选出当前角色匹配的路由，并调用 router.addRoute()（Vue Router 4）逐条或批量添加。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 添加完成后，再调用
next({ ...to, replace: true })确保跳转生效 - 刷新页面时，token 仍在但动态路由已丢失，需在应用启动阶段检查 token 并重新拉取用户角色、重建路由
- 注意：不能直接替换整个
router.options.routes，应使用官方推荐的动态添加方式
全局前置守卫做实时拦截
在 router.beforeEach 中完成三类关键判断：
- 若目标路径在白名单（如
['/login', '/404']），直接放行 - 若无 token，且目标非白名单，则强制跳转至
/login，并携带redirect参数记录原路径 - 若有 token，但目标路由需要权限（
to.meta.roles存在），则检查当前角色是否在该路由的roles数组中；不满足就跳转/403或/forbidden
守卫中还可统一设置页面标题、开启加载状态、记录访问日志等。
菜单渲染基于已有路由自动过滤
左侧菜单不应单独维护一份“菜单配置”，而应直接遍历当前已添加的路由（即 router.getRoutes() 返回的有效路由），按 meta 中的 title、icon、order 等字段生成菜单项。
- 支持嵌套路由的菜单需递归处理
children，只保留有meta.title且角色匹配的节点 - 菜单点击触发
router.push()，天然复用守卫逻辑，无需二次校验 - 避免菜单配置与路由配置不一致导致的权限漏洞或空白页
