Angular 如何允许根据模块条件向用户发送路由?

Angular 如何允许根据模块条件向用户发送路由?,angular,angular-ui-router,angular8,auth-guard,angular-route-guards,Angular,Angular Ui Router,Angular8,Auth Guard,Angular Route Guards,我知道Angular中Auth-guard的用法,我只是Angular的初学者,我刚刚做了一个基于读写访问的基本身份验证,包括像isAdmin或Isguest这样的角色 但现在我希望特定用户只能访问某些路由 我有三个模块 组件 B组分 C组分 并且上述所有组件可能是子路由,也可能不是子路由 我希望harry用户可以访问模块A和B Jackson可以访问模块B和C Michel只能访问模块A 那么,如何在Angular中构建这种类型的机制呢 事实上,我知道AuthGuard,但如何组织数据库中的数

我知道Angular中Auth-guard的用法,我只是Angular的初学者,我刚刚做了一个基于读写访问的基本身份验证,包括像isAdmin或Isguest这样的角色

但现在我希望特定用户只能访问某些路由

我有三个模块

  • 组件
  • B组分
  • C组分
  • 并且上述所有组件可能是子路由,也可能不是子路由

    我希望harry用户可以访问模块A和B

    Jackson可以访问模块B和C

    Michel只能访问模块A

    那么,如何在Angular中构建这种类型的机制呢

    事实上,我知道AuthGuard,但如何组织数据库中的数据以添加组件列表或其他内容

    我必须在canActivate中添加哪些条件

    这是一个解决方案,如果明天有一个新组件出现,我需要访问补助金,那么我需要处理更少的事务,并保持动态


    欢迎任何伟大的想法

    您将需要创建一个Auth-Guard,如下所示:

    @Injectable()
        export class MyGuard implements CanActivate {
          constructor(private _myUserService: MyUserService) {}
        
          canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
            if(//ADD CONDITION HERE)
                return true;
            return false;
          }
        }
    
    然后在你的路线上,你会有这样的东西:

    {
        path: 'XXX',
        component: XXXComponent,
        canActivate: [MyGuard],
    }
    

    您需要创建一个Auth-Guard,如下所示:

    @Injectable()
        export class MyGuard implements CanActivate {
          constructor(private _myUserService: MyUserService) {}
        
          canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
            if(//ADD CONDITION HERE)
                return true;
            return false;
          }
        }
    
    然后在你的路线上,你会有这样的东西:

    {
        path: 'XXX',
        component: XXXComponent,
        canActivate: [MyGuard],
    }
    

    您可以为每个路由添加权限,并存储每个用户所需的权限

    const routes: Routes = [
      {
        path: 'dashboard',
        loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
        canActivate: [ Guard ],
        data: { permission: 'view dashboard' }
      }
    
    在canActivate()中,您可以检查用户数据中是否存在权限

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      if(!route.data || (route.data && this.user.permissions.find(route.data.permission))) {
        return true;
      }
    }
    
    

    您可以为每个路由添加权限,并存储每个用户所需的权限

    const routes: Routes = [
      {
        path: 'dashboard',
        loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
        canActivate: [ Guard ],
        data: { permission: 'view dashboard' }
      }
    
    在canActivate()中,您可以检查用户数据中是否存在权限

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      if(!route.data || (route.data && this.user.permissions.find(route.data.permission))) {
        return true;
      }
    }
    
    

    Hi@enno.void我正在寻找的是如何组织数据库中的数据可能是我需要添加用户可以访问的组件列表canActivate内部的条件是什么?我正在寻找一个可靠的解决方案,就好像明天如果有其他组件出现,我需要做更少的处理来授予访问权限:)Hi@enno.void确切地说,我正在寻找如何组织数据库中的数据可能是我需要添加用户可以访问的组件列表canActivate内部的条件是什么?我正在寻找一个可靠的解决方案,就好像明天如果有任何其他组件出现,我需要在授予访问权限时少做一些处理:)是的,这是我知道的,但我如何在数据库中组织这样的条件我需要放置像用户文档这样的字段和像可以访问模块a B C之类的字段我正在寻找确切的答案和确切的条件如果你能在这方面付出更多的努力,那就太好了。。!!是的,这是我所知道的,但是我如何组织像数据库这样的内部条件我需要放置像用户文档这样的字段和像可以访问模块A B C这样的字段我正在寻找确切的答案和确切的条件如果你能在这方面付出更多的努力,那将是非常棒的。。!!我不知道答案,所以你的意思是说,在路由中,我只需要添加类似权限的属性数据:{permission:'view dashboard'}在用户类或界面中,我只需要查看主权限列表,如权限列表包含“查看仪表板”,我的意思是该列表为字符串类型,然后允许访问我是否理解得很好…?好的,谢谢,这似乎是最有希望的,我会尝试让您知道,但对于子路由,我们可以怎么做?顺便说一下,我使用的是angular版本10,所以在我尝试您的解决方案之前,您也可以建议我是否有任何语法更改:)对于子路由,您也可以用同样的方法处理它。我曾在第8版中尝试过这个方法,但应该会工作10年,而且这个答案似乎是最有希望的,因为我知道我会批准它,因为我认为没有任何其他方法会比这个更有效:)谢谢。。!!我不知道答案,所以你的意思是说,在路由中,我只需要添加类似权限的属性数据:{permission:'view dashboard'}在用户类或界面中,我只需要查看主权限列表,如权限列表包含“查看仪表板”,我的意思是该列表为字符串类型,然后允许访问我是否理解得很好…?好的,谢谢,这似乎是最有希望的,我会尝试让您知道,但对于子路由,我们可以怎么做?顺便说一下,我使用的是angular版本10,所以在我尝试您的解决方案之前,您也可以建议我是否有任何语法更改:)对于子路由,您也可以用同样的方法处理它。我曾在第8版中尝试过这个方法,但应该会工作10年,而且这个答案似乎是最有希望的,因为我知道我会批准它,因为我认为没有任何其他方法会比这个更有效:)谢谢。。!!