刚开始学习 Angular ,想通过后台管理页面学习上手。
Angular 文档上写的懒路由声明方式:
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
}
];
按照一般后台管理系统的方式,菜单列表都是从接口获取,然后前端再根据接口的列表注册路由。在 Angular 里使用 Router 的 resetConfig 方法可以更新注册路由,那么问题就是:接口返回回来的每个菜单对应的模块 /组件的信息肯定是字符串格式,要怎样的方式才能变成文档中声明所需的格式?
import('./customers/customers.module').then(m => m.CustomersModule)
这或许看起来更像是 TypeScript 的使用问题?网上查了一圈资料都没找到有关的信息(也可能是我方法不对),因此前端小白特来 V2 请教下各位大佬 Angular 下动态注册路由的正确方式,感谢!
1
chnwillliu 2022-03-01 04:43:08 +08:00 via Android
换个思路,不能动态注册,那控制路由是否可访问是一样的。
后端不直接管辖菜单列表,而是管理用户的 Permission List, 前端再把 Permission 和路由对应起来,可以一对一也可以一对多。路由配置上有 canLoad 和 canActivate 两种 Guard 可用,把要检查的权限放路由 data 字段,permission guard 里检查用户权限是否匹配目标路由所需权限来决定是否放行。至于你的 menu list 组件展示问题,当然也可以根据用户权限来动态生成。 |
2
chnwillliu 2022-03-01 04:57:47 +08:00 via Android
当然 RouterModule.forRoot/forChild 是可以接受动态生成的 Routes 配置的,但是你的数据要在 Router Module import 之前就准备好,而且正如你说的从 API 数据到前端组件类型的映射绕不开,写起来会不优雅。所以,莫不如不追求动态注册,而是用 Guard 控制可访问性。
|
3
sjhhjx0122 2022-03-01 09:44:20 +08:00
用守卫控制一下权限就好了,菜单列表的配置肯定跟路由的 path 一样,守卫判断一下就好了,没必要这么繁琐
|
4
grittiness OP |
5
nzbin 2022-03-01 11:31:05 +08:00
|