这是一个创建于 777 天前的主题，其中的信息可能已经有所发展或是发生改变。
刚开始学习 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
|
Select Language