Question

我已经创建了一个侧边栏组件。它有6个导航按钮。对于不同的用户登录，我想显示不同的导航按钮。

假设我有A, B, C, D, E个导航选项

我要显示：

对于用户：A, B, C

对于管理员：A, B, D, E

Answer 1

通常，您会使用类似Auth的服务来存储用户数据及其角色。

因此只需将服务注入侧边栏

constructor (public auth: AuthService, ....) {}

并检查模板中的角色：

<a routerLink="component-c" *ngIf="auth.isUser"></a>
<a routerLink="component-d" *ngIf="auth.isAdmin"></a>
<a routerLink="component-e" *ngIf="auth.isAdmin"></a>

Answer 2

您可以想到这样的解决方案（因为您没有发布任何代码，所以一切都是示例）：

Json响应了您的身份验证：

{
  "username":"Mark",
  "role":"admin"
}

定义这样的类：

export class JsonModelFromBackendLogin{
  username: string;
  role: string;
}

您的component.ts

loginResponce: JsonModelFromBackendLogin;
isLoading = true;

ngOnInit(){
  this.service.login(...)
  .subscribe(responce => {
    this.loginResponce = responce;
    this.isLoading = false;
  });
}

您的component.html：

<ul>
  <li>Section A</li>
  <li>Section B</li>
  <li *ngIf="loginResponce.role == 'user'">Section C</li>
  <li *ngIf="loginResponce.role == 'admin'">Section D</li>
  <li *ngIf="loginResponce.role == 'admin'">Section E</li>
</ul>

对于不同的用户登录，我想显示不同的侧边栏选项

2 个答案: