如何根据angular4中的用户权限显示标签？

Question

我有一个应用程序，在登录后向用户显示一些数据。用户登录后，将呈现仪表板，其中包含一些饼图，折线图和表格数据。

仪表板包含5个不同的选项卡，目前仪表板上的所有选项卡均可用。现在，根据最新要求，我只需要显示允许用户查看的特定选项卡。

所有标签都是单独的角度组件。现在我想以一种方式实现它，如果用户没有2个标签的权限，那么在仪表板上只应显示3个标签？

登录用户角色和权限后，我掌握了有关用户的所有信息。

我需要帮助我应该遵循什么样的方法？

Answer 1

使用* ngIf

执行此操作

<tab1 *ngIf="isAdmin"></tab1>
<tab2 *ngIf="!isAdmin"></tab2>
<tab3 *ngIf="isKeyUser"></tab3>

并在组件中根据当前登录的用户设置这些变量。

private isAdmin: boolean = false;
private isKeyUser: boolean = false;

private setRoles(): void {
   if(this.user.role === 'admin'){
      this.isAdmin = true; 

      [...]
   }
}

Answer 2

我认为你在找Auth guards之类的东西。您可以实现一项服务，该服务能够确定用户的权限，并且警卫可以使用该服务来禁用和启用选项卡（或者可以使用ngif来停止呈现缺少权限的选项卡）。路由器功能可用于呈现标签栏。

我希望能帮助你。