63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
# 9.5 路由与动态菜单
|
||
|
||
:::tip 概述
|
||
路由分两类：**静态路由**（constant，登录页/异常页等始终存在）与**动态路由**（登录后由菜单 API 生成注入）。守卫负责时序编排：token 校验 → 拉取用户信息 → 生成路由 → 放行。
|
||
:::
|
||
|
||
## 目录结构
|
||
|
||
```text
|
||
router/
|
||
├── constant.ts 静态常量路由
|
||
├── base.ts 基础路由（错误页/关于/设置等固定页）
|
||
├── generator-routers.ts 动态路由生成器（菜单树 → 路由表）
|
||
├── router-guards.ts 全局守卫
|
||
├── router-icons.ts 图标映射
|
||
├── menus/ 菜单相关辅助
|
||
└── types.ts 类型
|
||
```
|
||
|
||
## 动态路由流水线
|
||
|
||
```text
|
||
登录成功存 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 返回） |
|
||
|
||
## 相关
|
||
|
||
- [6.3 菜单管理](/zh/modules/menu.html)（数据源头）
|
||
- [9.8 登录流程](/zh/frontend/login.html)
|