根据用户显示选项

Question

我有 3 个用户 Admin、Supervisor 和 Student。我想要做的是，管理员和主管可以编辑和删除学生数据，而学生只能删除和编辑自己的数据。他只能查看其他人的数据。

我在 json 中为用户获取角色，如下所示：

Admin: ["Administrator"]
Supervisor: ["Supervisor", "Guest"]
Student: ["Student", "Guest"]

以下是我正在尝试做的事情：

Exhibits.component.ts

   getCurrentUser() {
     this.userService.getCurrent()
       .then(
         (response) => {
           this.currentUserId = response.id;
            for (let role of response.roles) {
             if (role === 'Administrator') {
               this.canEdit = true;
             } else if (role === 'Supervisor') {
               this.canEdit = true;
             } else if (role === 'Student') {
               this.canEdit = false;
             }
          }
        }
      ).catch(
        (error) => console.log(error)
      );
  }

Exhibits.component.html

  <div *ngIf="canEdit && this.currentUserId === exhibit.userId">
    <button md-icon-button click-stop-propagation color="primary" [routerLink]="['/mobile-content/exhibits/edit', exhibit.id]"
      title="{{ 'edit' | translate }}">
      <md-icon>{{ !inDeletedPage ? 'edit' : 'remove_red_eye'}}</md-icon>
    </button>
    <button md-icon-button click-stop-propagation color="warn" (click)="deleteExhibit(exhibit)" *ngIf="!exhibit.used && !inDeletedPage"
      title="{{ 'delete' | translate }}">
      <md-icon>delete_forever</md-icon>
    </button>
  </div>

我正在尝试显示我根据 userId 在数组中获得的展览。这意味着，在 exhibits json 响应中，我得到 "userId"，我试图将其与当前用户的 userId 匹配。唯一的问题是学生只能看到他创建的展览的删除和编辑选项，但管理员和主管可以看到所有用户创建的展览的编辑和删除选项。

谁能帮我解决这个问题？

Answer 1

首先，我建议在前端和后端都将其转换为枚举，而不是依赖字符串匹配。

但是从你的代码来看，如果我没看错的话，没有学生能够拥有编辑和删除按钮，因为你总是在该用户类型上设置为 false。

你的第二个问题将出现在你的 *ngIf 中，其中说明如下：

*ngIf="canEdit && this.currentUserId === exhibit.userId"

这将导致这些按钮总是在不需要的时候被隐藏，因为即使对于管理员和其他用户，您也需要用户 ID 匹配的条件才能评估为真。您也不需要在模板中指定 this。

就个人而言，我会做更多类似的事情。

getCurrentUser() {
  this.userService.getCurrent()
    .then(
      (response) => {
        this.currentUserId = response.id;
         for (let role of response.roles) {
          if (role === 'Administrator') {
            this.canEdit = true;
          } else if (role === 'Supervisor') {
            this.canEdit = true;
          } else if (role === 'Student') {
            if (this.currentUserId === this.exhibit.userId) {
             this.canEdit = true;
            } else {
             this.canEdit = false;
            }
          }
       }
     }
   ).catch(
     (error) => console.log(error)
   );
}

然后您就可以将模板 *ngIf 更改为：

*ngIf="canEdit"

顺便说一句，您可能还想将对角色的检查更改为 switch 语句，它的性能更高，并且会让您的代码更简洁。

或者你可以这样做，这会完成同样的事情。

getCurrentUser() {
  this.userService.getCurrent()
    .then(
      (response) => {
        this.currentUserId = response.id;
         for (let role of response.roles) {
          if (role === 'Administrator') {
            this.canEdit = true;
          } else if (role === 'Supervisor') {
            this.canEdit = true;
          }
       }
     }
   ).catch(
     (error) => console.log(error)
   );
}

模板代码为：

*ngIf="canEdit || this.currentUserId === exhibit.userId"

根据用户显示选项

Show options according users

html

typescript

angular-ng-if

angular

Exhibits.component.ts

Exhibits.component.html