如何基于Angular中的角色动态添加authguard？

Question

在我的Angular应用中，管理员用户创建了其他用户和角色。

在创建角色时，管理员可以为其添加权限。即这种类型的用户角色可以访问哪些菜单项？

具有挑战性的部分是，我需要为路由指定auth Guard。

例如，

主管角色类型可以访问-菜单项1菜单项2，菜单项4，菜单项5

工程师角色类型可以访问-菜单项3，菜单项6

所有菜单项都是单独的模块。

当工程师尝试通过URL访问菜单项1时，应将其重定向。

请帮助我。任何高级方法对我来说都是很好的。预先感谢

Answer 1

如果您想采用一种干净的方法来基于角色管理权限，建议您使用 ngx-permissions

npm i ngx-permissions

NgxPermissionsGuard实现CanLoad接口，您可以像这样使用它

 {
  path: 'lazy',
  data: {
   permissions: {
     only: 'SUPERVISOR',
   }
  },
  canLoad: [NgxPermissionsGuard],
  loadChildren: 'app/lazy-module/lazy-module.module#LazyModule'
},

如果您想授予对除Supervisor以外的权限的权限，则可以使用 except

data: {
   permissions: {
     except: 'SUPERVISOR',
   }
},

两种可能性都是可能的

 data: {
  permissions: {
    only: ['ADMIN', 'MODERATOR'],
    except: ['SUPERVISOR']
  }
}

更多详细信息here

如果您不想使用ngx权限，则可以创建服务

@Injectable()
export class AuthGuardService implements CanLoad {
 constructor(private router: Router) {}

 canLoad(route: Route): boolean {

 let url = route.path; //get url here, example menu1
 // get permissions array here from a service or localstorage
 if(permissions.indexOf(url) !== -1 ) { //means it exist
   return true
 }
 return false; 
 }
} 

并将其添加到您的3条路线中

 {path: "menu1", loadChildren:'./main/menu.module#Menu1Module', canLoad:[AuthGuardService]}
 ...