2.2 KiB
2.2 KiB
9.5 路由与动态菜单
:::tip 概述 路由分两类：静态路由（constant，登录页/异常页等始终存在）与动态路由（登录后由菜单 API 生成注入）。守卫负责时序编排：token 校验 → 拉取用户信息 → 生成路由 → 放行。 :::
目录结构
router/
├── constant.ts 静态常量路由
├── base.ts 基础路由（错误页/关于/设置等固定页）
├── generator-routers.ts 动态路由生成器（菜单树 → 路由表）
├── router-guards.ts 全局守卫
├── router-icons.ts 图标映射
├── menus/ 菜单相关辅助
└── types.ts 类型
动态路由流水线
登录成功存 token
↓
路由守卫 beforeEach：
无 token → 白名单放行 / 其余跳登录（带 redirect）
有 token 且未生成 → GetInfo（用户信息）→ generateRoutes（消费 GetMenus 菜单树）
↓
菜单行映射：path → 路由路径，component → views 下组件（懒加载）
↓
router.addRoute 逐条注入 → 标记 isDynamicAddedRoute
↓
侧边栏按路由表渲染（layout）
菜单到组件的映射
后端菜单表的 component 字段存 views 下相对路径（如 system/user/index），生成器将其转为 () => import('@/views/system/user/index') 懒加载——新增页面只需在 views 放组件 + 菜单表配路径，不改路由代码。
守卫要点
| 机制 | 说明 |
|---|---|
| 白名单 | 登录页免 token |
| ignoreAuth | meta 声明的免登录页 |
| URL 带 token | ?token=xxx 自动落 storage（单点登录跳转场景） |
| redirect | 未登录跳登录后回跳原路径 |
| NProgress | 导航进度条 |
| 首路由 | findFirstRoutePath 定位登录后首个落地页 |
排查
| 现象 | 检查 |
|---|---|
| 登录后白屏 | 菜单 component 路径与 views 文件不符（懒加载失败） |
| 刷新 404 | 部署服务器 history 模式回退配置（try_files） |
| 菜单少了 | 角色授权问题（看 GetMenus 返回） |