以角度5显示/隐藏链接的最佳方式-Java 学习之路

我目前有一个主页，可以路由到我公司运行的所有不同的工作流程 . 我们有大约15个不同的工作流程，每个工作流程都由用户角色保护 . 如果您在数据库中没有正确的用户角色，则不会看到该页面的相应链接 . 我们保护服务器 endpoints ，但我担心的是向人们显示链接或不显示链接的最佳方式是什么，我宁愿不重复代码 .

这是一种方法：

我有一个像这样的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>

像我的方法可以工作还是有更好的角度方式这样做？我在文档中找不到任何类似的东西 . 如果您还可以提供文档加分 .

1 回答

我认为这样做的一种方法是制定结构指令 . 您可以创建一个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

回复于 2024-04-29T05:40:25+08:00

以角度5显示/隐藏链接的最佳方式

1 回答

相关问题