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

Question

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

创建 Angular 色时，管理员可以为其添加权限。即此类用户 Angular 色可以访问哪些菜单项？

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

例如，

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

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

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

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

请帮我解决这个问题。任何高层次的方法对我来说都很好。提前致谢

Answer 1

如果您想要一种干净的方式来管理基于 Angular 色的权限，我建议您使用ngx-permissions

npm i ngx-permissions

NgxPermissionsGuard实现了CanLoad接口(interface)，你可以这样使用

 {
  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 条 route

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