Question

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

我在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的回应中，我得到了＃user;＆＃34;我试图与当前用户的userId匹配。 Oly的东西是学生只能看到他创建的展览的删除和编辑选项，但是管理员和主管可以看到所有用户创建展览的编辑和删除选项。

任何人都可以帮我解决这个问题吗？

Answer 1

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

但从你的代码判断，如果我正确阅读，没有学生能够拥有编辑和删除按钮，因为你总是在该用户类型上设置为false。

您的第二个问题将出现在*ngIf中，其中包含以下内容：

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

这将导致这些按钮始终在不需要的时间被隐藏，因为即使在管理员和其他用户上，您也需要以用户ID匹配为条件来评估为true。您也不需要在模板中指定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"

根据用户显示选项

Exhibits.component.ts

Exhibits.component.html

1 个答案: