在 angular 2 中隐藏特定用户所需的菜单项

Question

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

我已经在authentication.service.ts中定义了一个用户名和password.Using这个界面的用户我已经定义了两个用户admin 和用户.

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

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

当 admin 或 user 登录应用程序时，会出现一个菜单栏，我有三个菜单项 主页，AdminActivity，RegisterUser .

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

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

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

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

Answer 1

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

在你的routing.module.ts中，修改你的'Admin'路线，

{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;
    }

希望这会有所帮助。

Answer 2

更新了您的示例代码HERE

使用 BehaviorSubject 跟踪用户类型并将其用于 show/hide 菜单项。您可以使用它在整个应用程序的不同组件内进行通信。我删除了您的一些导致 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的变化：

show/hide 个菜单项 *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>

在 angular 2 中隐藏特定用户所需的菜单项

Hiding the required menu items for the particular user in angular 2

authentication

angular-material

angular-flex-layout

angular