以角度 2 隐藏特定用户所需的菜单项

Question

我创建了一个 angular 应用程序，其中有一个登录表单，我在其中使用 service 和 guard 实现了身份验证。

我用用户名和密码定义了一个接口用户。在authentication.service.ts 中使用这个接口我定义了两个用户admin和user。

我还实现了一个名为authentication.guard.ts的守卫，我在其中使用CanActivate RouteGaurd 将用户路由到他可以访问的页面。

在我的应用程序中有一个只能由管理员用户访问的管理页面，因此如果管理员仅登录，它就会导航到管理页面。如果用户登录，那么他将被重定向到主页，跳过管理页面

当管理员 或用户登录应用程序时，会出现一个菜单栏，其中我有三个菜单项Home、AdminActivity、RegisterUser。

如果管理员登录应用程序，我试图隐藏AdminActivity菜单项，如果用户登录应用程序，则隐藏RegisterUser菜单项。

我尝试在app.component.ts 中导入身份验证服务，但无法获取记录的用户名和密码。

任何人都可以帮助我实现所需的功能，因为我需要在我的应用程序中实现

请在此处访问我的示例应用程序

Answer 1

在此处更新了您的示例代码

用于BehaviorSubject跟踪用户类型并用它来显示/隐藏菜单项。您可以使用它在整个应用程序的不同组件内进行通信。我删除了一些在 Stackblitz 中导致错误的代码，但不要专注于此。

变化AuthenticationService：

声明userType BehaviorSubject为：

  userType: BehaviorSubject<string> = new BehaviorSubject<string>(this.getUserType());

添加了从本地存储获取用户类型的方法：

  getUserType() {
    return localStorage.getItem('user')
  }

userType BehaviorSubject登录时更新：

login(username, password) {
...
localStorage.setItem("user", this.user.username);
this.userType.next(this.user.username);

变化app.componet.ts：

订阅userType BehaviorSubject：

  userType: string = '';

  ngOnInit(){
    ...
    this.authService.userType.subscribe(value => this.userType = value);
  }

变化app.componet.html：

显示/隐藏菜单项*ngIf：

  <button *ngIf="userType === 'admin'" mat-raised-button routerLink='application/AdminAccess/admin-activity' routerLinkActive="active">Admin Activity </button>

  <button *ngIf="userType === 'user'" mat-raised-button routerLink='application/UserManagement/add-users' routerLinkActive="active">Register User</button>