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

Question

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

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

具有挑战性的部分是，我需要为路由指定身份验证保护。

例如，

主管角色类型可以访问 - 菜单项 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'
},

如果您想授予对主管以外的其他内容的访问权限，您可以使用 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]}
 ...