如何根据 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-permission，您可以创建一个服务

@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]}
 ...

如何根据 Angular 中的角色动态添加 authguard？

How to dynamically add authguard based on a role in Angular?

rbac

angular

auth-guard