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

Question

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

我已经定义了一个用户名和密码的界面用户。在authentication.service.ts中使用这个界面我已经定义了两个用户admin和user强>。

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

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

当 admin 或 user 登录应用程序时，会出现一个菜单栏，其中包含三个菜单项 Home, AdminActivity ,RegisterUser 。

如果 admin 登录应用程序，我试图隐藏 AdminActivity 菜单项，如果 user 则隐藏 RegisterUser 菜单项 登录应用程序。

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

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

请访问我的示例应用程序here

Answer 1

更新了您的示例代码HERE

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

AuthenticationService 的变化：

声明userTypeBehaviorSubject为：

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

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

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

在登录时更新userTypeBehaviorSubject：

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

app.componet.ts 的变化：

订阅userTypeBehaviorSubject：

  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>

Answer 2

由于您的 stackbliz 无法正常工作，但下面我想提供一些有用的代码：-

在您的 routing.module.ts 中，修改您的“管理员”路由，

{path:'Admin',component: AdminComponent,
data: {
    authorities: ['ROLE_ADMIN'],
},
canActivate: [AuthenticationGuard]}

在你的 authenticationguard.guard.ts 中，修改如下：-

 constructor( private auth: AuthenticationService,  private _router: Router) {} 
    
 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Promise<boolean> {

        const authorities = route.data['authorities'];
        // here you get authorities user role name, now you can apply your service logic
         if (!this.auth.isSuperAdmin(authorities)) { // add arg in isSuperAdmin to validate username
      this._router.navigate(['/application/home']);
      return false; 
    }
    
    return true;
    }

希望这会有所帮助。