Vue Router 权限路由：动态路由、导航守卫与白名单的工程落地

Vue Router 权限路由动态路由、导航守卫与白名单的工程落地后台管理系统最常见的“前端安全”问题不是加密而是权限登录后菜单如何按角色显示直接输入 URL 能不能越权刷新页面后动态路由丢失怎么办这篇给你一套能直接落地的权限路由模型白名单登录页/公共页直接放行登录态校验无 token 一律回登录带 redirect动态路由注入根据角色/菜单生成可访问路由刷新重建刷新后重新拉用户信息并重新注入越权兜底401/403/404 的处理一致且可解释重点不是背 API而是把“权限”做成一条可观测、可排查、可迭代的工程链路。1. 先把权限模型说清楚否则一定返工权限通常分三层越往下越“硬”展示权限菜单/按钮显隐访问权限路由能不能进数据权限接口返回什么数据这层必须由后端保证这篇聚焦前两层展示 访问。一个重要结论菜单只是 UI路由守卫必须兜底访问权限。2. 你需要哪些基础能力要做成可维护的权限路由至少要有这些“权威信息源”登录态token当前用户userInfo至少包含 role/permissions路由来源前端静态路由公共页、基础布局动态路由按角色生成/按菜单生成以及一个“防重复注入”的标记isRoutesReady动态路由是否已注入3. 基础结构白名单 受保护路由白名单路由无需登录/login/404其它路由默认需要登录。4. 导航守卫主流程推荐覆盖 90% 后台项目你可以用这个主流程覆盖 90% 项目未登录访问受保护路由 - 跳登录带 redirect已登录但用户信息未加载 - 拉取用户信息根据角色生成动态路由 - 注入 router再次进入目标路由replace 避免重复历史访问无权限 - 跳 403/404伪代码核心是“登录态校验 - 用户信息 - 注入动态路由 - replace 继续前进”router.beforeEach(async(to,from,next){constuserStoreuseUserStore()constpermissionStoreusePermissionStore()constwhiteList[/login,/404]if(whiteList.includes(to.path))returnnext()if(!userStore.token){returnnext(/login?redirect${encodeURIComponent(to.fullPath)})}// 刷新后token 在但内存 userInfo 丢了 - 重新拉if(!userStore.userInfo)awaituserStore.fetchUserInfo()// 动态路由未就绪 - 生成并注入然后 replace 继续if(!permissionStore.isRoutesReady){constdynamicRoutesbuildRoutesByRole(userStore.userInfo.role)dynamicRoutes.forEach((r)router.addRoute(r))permissionStore.isRoutesReadytruereturnnext({...to,replace:true})}if(!hasRoutePermission(to,userStore.userInfo.role)){returnnext(/404)}next()})关键点replace: true避免“注入路由后同一路由进两次”动态路由注入要在刷新后能重新执行工程上的底线守卫里不要发重复请求用isRoutesReady或类似标记保证只初始化一次不要用菜单显隐代替路由权限UI 可以绕过守卫不能5. 动态路由怎么生成更好维护两种路线常见两种策略5.1 前端写死路由表 按角色过滤优点简单、可控不依赖后端返回路由配置适合中小型项目。5.2 后端返回菜单/路由配置 前端映射组件优点菜单可配置多系统统一权限模型风险需要维护“组件映射表”后端字段变化会导致前端路由失效工程建议如果你是个人/小团队项目优先前端静态路由表 过滤可控、可读、可测试如果你是多系统统一平台再考虑后端菜单配置但要把“组件映射表 回滚策略”做扎实6. 刷新后动态路由丢失怎么解决必考点本质原因浏览器刷新后内存中的 router 动态注入状态会丢解决策略刷新后在守卫里重新拉取用户信息并重新注入动态路由token 持久化localStorageuserInfo 可以不持久化刷新后重新请求更安全一个更稳的实现方式token 持久化userInfo 不强依赖持久化每次刷新进入守卫token 有 -fetchUserInfo()如果 userInfo 缺失routes 未注入 - build addRoute replace: true7. 越权与异常兜底401/403/404 怎么选建议兜底路径401登录失效 - 回登录403无权限 - 403 页面或 404 隐藏资源404路由不存在 - 404 页面如果你不想暴露资源存在性可以把无权限也跳 404。常用选择ToC 或对外平台倾向把无权限也跳 404隐藏资源存在性内部后台可以用 403 页面更利于排查权限配置注意401 通常由 Axios 拦截器统一处理清理登录态并跳登录路由守卫只做补兜底。8. 常见坑与排查刷新白屏/404大概率是动态路由未注入就进入了目标路由解决守卫里注入后next({ ...to, replace: true })无限重定向登录页没加入白名单或守卫里无条件跳转菜单有但进不去展示权限和访问权限未统一菜单过滤了路由守卫没放行 / 或相反切换账号后菜单没刷新退出登录时没清理isRoutesReady与动态路由9. 面试表达30 秒讲清楚我一般会这样讲我把权限分成展示权限和访问权限访问权限由路由守卫兜底。守卫流程是白名单放行 - 无 token 回登录带 redirect- 有 token 但 userInfo 缺失就拉用户信息 - 根据角色生成动态路由并注入 -replace继续进入目标路由。刷新后动态路由会丢所以守卫里要做重建并用标记避免重复注入。无权限我会根据场景选择 403 或 404并且 401 一般交给 Axios 拦截器统一处理。10. 总结权限路由要保证“访问权限”不是只做菜单显示导航守卫登录态校验 - 拉用户信息 - 注入动态路由 - replace 进入目标路由刷新后路由丢失是正常现象靠守卫重建即可401/403/404 做好兜底体验和可维护性都会提升