0

我有 2 个动作，

  actions: CalendarEventAction[] = [

    {
      label: '<i class="material-icons mat-icon">edit</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.editCalendarEvent(event);
    }
    }, {
      label: '<i class="material-icons mat-icon">remove</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.removeCalendarEvent(event);
    }
    },
]

但我希望只有具有角色的用户（例如：管理员）才能看到第二个图标，即删除事件。

如何为其余用户隐藏第二个图标并为管理员显示它。

谢谢

4

1 回答 1

0

我还没有玩过 Angular，所以我绝不是回答这个问题的最佳人选，所以希望有人能提出更好的解决方案。但是暂时您可以在onClick函数中添加一个条件来检查用户是否具有权限。

onClick: ({ event }: { event: CalendarEvent }): void => {
    if(user.admin) {
        this.removeCalendarEvent(event);
    } else {
        alert("--!!! You Don't Have Permission To Perform This Action !!!--");
    }
}

您还可以尝试onload在标签上添加一个功能并检查用户是否像以前一样是管理员，如果不是，您可以设置label.disabled="true"

...
label: '<i onload="checkPermission()" id="removeBtn" class="material-icons mat-icon">remove</i>',
...

checkPermission() => {
    if(!user.admin) {
       document.getElementById("removeBtn").disabled = true;
    }
}

或者完全隐藏按钮

...document.getElementById("removeBtn").display = "hidden";
...

您可能希望从后端的数据库中提取用户数据（例如角色）。您可以为此使用 node.js。如果不是，您更容易受到人们通过控制台获得管理员权限的影响。

于 2021-09-02T11:49:13.437 回答