以角度5显示/隐藏链接的最佳方式
发布时间:2020-12-17 17:33:58 所属栏目:安全 来源:网络整理
导读:我目前有一个主页,可以路由到我公司运行的所有不同工作流程.我们有大约15个不同的工作流程,每个工作流程都由用户角色保护.如果您在数据库中没有正确的用户角色,则不会看到该页面的相应链接.我们保护服务器端点,但我担心的是向人们显示链接或不显示链接的最佳
我目前有一个主页,可以路由到我公司运行的所有不同工作流程.我们有大约15个不同的工作流程,每个工作流程都由用户角色保护.如果您在数据库中没有正确的用户角色,则不会看到该页面的相应链接.我们保护服务器端点,但我担心的是向人们显示链接或不显示链接的最佳方式是什么,我宁愿不重复代码.
这是一种方法: 我有一个像这样的html页面 <ul> <li *ngIf="authService.hasRequiredRole('users.user-admin')" routerLink="/user">Users</li> <li *ngIf="authService.hasRequiredRole('users.role-admin')" routerLink="/role">Roles</li> </ul> 我有这样的身份验证服务: hasRequiredRole(roles: string | [string]) { if (typeof roles === 'string') { roles = [roles]; } for (const roleSlug of roles) { if (this.user.roles.find((role: any) => { return role.slug === roleSlug; })) { return true; } } return false; } 我有一个像这样的路由的路由器: const routes: Routes = [{ path: 'user',data: { allowedRoles: 'users.user-admin' },loadChildren: 'app/user/user.module#UserModule',canActivate: [AuthGuard] },{ path: 'home',component: HomeComponent }] AuthGuard只检查用户是否已登录,然后使用路由中的数据来检查用户是否具有正确的角色. 如您所见,我们使用字符串’users.user-admin’有两个不同的位置. 我想我们应该有一个带两个警卫的路由器.一名警卫将检查用户是否已登录,另一名警卫将检查用户是否具有正确的角色.该角色将在此处进行硬编码: export class UserAdminGuard implements CanActivate { constructor(private router: Router,private authService: AuthService) {} canActivate( next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable < boolean > | Promise < boolean > | boolean { return this.authService.hasRequiredRole('users.user-admin'); } } 然后html看起来像这样: <ul> <li *ngIf="userAdminGuard.canActivate()" routerLink="/user">Users</li> <li *ngIf="roleAdminGuard.canActivate()" routerLink="/role">Roles</li> </ul> 像我的方法可以工作还是有更好的角度方式这样做?我在文档中找不到任何类似的东西.如果您还可以提供文档加分. 解决方法
我认为这样做的一种方法是制定结构指令.您可以创建一个RolesDirective,它根据您传递的角色处理显示/隐藏内容的逻辑.
例如: 你的指令看起来像这样 @Directive({ selector: '[roles]',inputs: ['roles'] }) export class RolesDirective { constructor(private _templateRef: TemplateRef<any>,private _viewContainer: ViewContainerRef,private userService: UserService) { } @Input() set roles(allowedRoles: Array<string>) { let shouldShow: boolean = false; let userRoles:Array<string> = this.userService.getUserRoles(); for(let role of userRoles){ if(role.toUpperCase() == "ADMIN"){ shouldShow = true; break; } for(let allowedRole of allowedRoles){ allowedRole = allowedRole.toUpperCase(); if(allowedRole.toUpperCase() == role.toUpperCase()){ shouldShow = true; break; } } } if (shouldShow) { this._viewContainer.createEmbeddedView(this._templateRef); } else { this._viewContainer.clear(); } } } 在你的html中,只传递该组件的允许角色 <ul> <li *roles="['admin']" routerLink="/user">Users</li> <li *roles="['other','roles']" routerLink="/role">Roles</li> </ul> 这是结构指令的文档:https://angular.io/guide/structural-directives (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读