vue3笔记(21-2)动态路由
这篇是上一篇的延伸,详细记录下动态路由的使用。
项目中使用-子系统
动态菜单格式如下:
1 |
|
其中 level=3 数组,用于前端按钮展示,为了用户友好,系统定义若用户无权限访问(例如只能查看,不能修改),直接将操作按钮隐藏。
store/modules/permission.ts
中存储菜单信息,这里MenuType
添加了类型 fold ,表示文件夹地址,因为前端在工程设计时将不同组件存放于不同文件夹下,如果直接在path中写几层地址,这里会导致导入组件失败。
routes表示静态路由,例如:首页(/),404(/404)等应用开放给所有用户的页面,dynamicRoutes 表示动态路由,是在应用初始化时从后端获取的。
1 |
|
Sidebar/index.vue
中渲染菜单,这里可以使用
(1)router.getRoutes()
(2)router.options.routes 和d ynamicRoutes 的组合来展示侧栏菜单
但是 getRoutes 中携带的数据不够,这里需要自定义菜单的部分内容,所以还是采用获取的后端原始数据的 dynamicRoutes。
1 |
|
子系统permission.ts
路由守卫中中判断 token。
若有,执行获取动态菜单的操作,并且在获取成功之后进行过滤,如果当前去往的地址在白名单内,则放行;反之,跳转 404 页面。
若无 token,则跳转 UMS 首页。
1 |
|
同时在service.ts
中也需要设置若 token 失效(请求中后端返回 401),跳转系统首页。
1 |
|
UMS系统
这里设置白名单,无 token 状态下白名单路由放行。
casdoor 登录成功跳转页(/cb)在白名单中,用作系统登录中转(使用 casdoor SDK 登录),成功后跳转首页。
同理,若在子系统已清除 token 情况下,跳转 UMS 首页(/ums),则通过首页中转后间接跳转登录页(/login)。ums
中的路由守卫如下:
1 |
|