V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
grittiness
V2EX  ›  Angular

小白请教关于 Angular 路由的动态注册方式

  •  
  •   grittiness · 2022-02-28 23:51:23 +08:00 · 2312 次点击
    这是一个创建于 1009 天前的主题,其中的信息可能已经有所发展或是发生改变。

    刚开始学习 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 下动态注册路由的正确方式,感谢!

    5 条回复    2022-03-01 11:31:05 +08:00
    chnwillliu
        1
    chnwillliu  
       2022-03-01 04:43:08 +08:00 via Android
    换个思路,不能动态注册,那控制路由是否可访问是一样的。

    后端不直接管辖菜单列表,而是管理用户的 Permission List, 前端再把 Permission 和路由对应起来,可以一对一也可以一对多。路由配置上有 canLoad 和 canActivate 两种 Guard 可用,把要检查的权限放路由 data 字段,permission guard 里检查用户权限是否匹配目标路由所需权限来决定是否放行。至于你的 menu list 组件展示问题,当然也可以根据用户权限来动态生成。
    chnwillliu
        2
    chnwillliu  
       2022-03-01 04:57:47 +08:00 via Android
    当然 RouterModule.forRoot/forChild 是可以接受动态生成的 Routes 配置的,但是你的数据要在 Router Module import 之前就准备好,而且正如你说的从 API 数据到前端组件类型的映射绕不开,写起来会不优雅。所以,莫不如不追求动态注册,而是用 Guard 控制可访问性。
    sjhhjx0122
        3
    sjhhjx0122  
       2022-03-01 09:44:20 +08:00
    用守卫控制一下权限就好了,菜单列表的配置肯定跟路由的 path 一样,守卫判断一下就好了,没必要这么繁琐
    grittiness
        4
    grittiness  
    OP
       2022-03-01 10:00:25 +08:00
    @chnwillliu
    @sjhhjx0122
    确实用守卫来控制也是不错的方式,感谢解答!
    nzbin
        5
    nzbin  
       2022-03-01 11:31:05 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1583 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 16:59 · PVG 00:59 · LAX 08:59 · JFK 11:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.