Question

我有一些按钮，应该根据登录的用户角色启用或禁用。用户角色存储在本地存储中，我得到这样的值

this.userRole = localStorage.getItem('role');

然后我有一个if语句，它遍历所有可能的用户角色并将变量设置为true或false。然后，将此变量附加到每个按钮。

  if(this.userRole === 'System Admin') {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  } else if (this.userRole === 'CAT Manager') {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  } else if (this.userRole === 'HR Admin') {
    this.corporateButtonDisabled = true;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = true;
    this.profileButtonDisabled = false;
  } else {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  }

然后将我的HTML设置如下

<div style="position: absolute; top:0; right: 0;">
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/dashboard']"  > Dashboard 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" > Users 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/corporate/dashboard']"  > Corporates 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/archive']"  > Archive 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  > 
    <span id="circle"></span> {{ name }}
  </button>
  <button  id="logout-btn" (click)="isDialogOpen = true" class="main">Log out</button>
</div>

无法正常工作，因为以HR管理员身份登录后，我仍然可以单击所有按钮。有什么想法吗？

Answer 1

您不必使用所有这些指令，只需将条件链接起来，如下所示：例如/my-profile按钮：

<button 
    [disabled]="corporateButtonDisabled || 
                rolesButtonDisabled || 
                dashboardButtonDisabled ||
                templatesButtonDisabled || 
                archiveButtonDisabled || 
                profileButtonDisabled"
    id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  > 
    <span id="circle"></span> {{ name }}
</button>

如果我使用多个指令，则不会禁用按钮

1 个答案: