
刚开始学习 Angular ,想通过后台管理页面学习上手。
Angular 文档上写的懒路由声明方式:
const routes: Routes = [ { path: 'customers', loadChildren: () =&g; 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 linkopeneyes 2022-03-01 09:44:20 +08:00 用守卫控制一下权限就好了,菜单列表的配置肯定跟路由的 path 一样,守卫判断一下就好了,没必要这么繁琐 |
4 grittiness OP |
5 nzbin 2022-03-01 11:31:05 +08:00 |