代码之家 › 专栏 › 技术社区 › Heena

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

angular-flex-layout angular-material authentication angular

Heena · 技术社区 · 6 年前

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

我定义了一个带有用户名和密码的界面用户 身份验证.service.ts 我定义了两个用户 管理员 和用户 .

我还实现了一个名为 authentication.guard.ts认证 我带去的地方激活 RouteGaurd将用户路由到他可以访问的页面。

在我的应用程序中有一个管理页,只能通过 管理员 用户,因此如果管理员只登录,则导航到 管理页 .如果用户登录后,他将被重定向到主页跳过 管理页

当 管理员 或用户登录到应用程序时,会出现一个菜单栏,其中有三个菜单项 主页,管理员活动,注册用户 .

我想藏起来 管理活动 菜单项如果 管理员 登录到应用程序并隐藏 寄存器用户 菜单项如果用户登录到应用程序。

我试图将身份验证服务导入 应用组件 但我无法获取登录的用户名和密码。

有谁能帮我实现我在应用程序中需要实现的功能吗

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

2 回复 | 直到 6 年前

Abdul Rafay 6 年前

更新了示例代码 HERE

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

变化 AuthenticationService :

宣布 userType 行为主体 作为:

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

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

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

更新 用户类型 行为主体 在登录中:

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

变化 app.componet.ts :

订阅 用户类型 行为主体 :

  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>

Gautam 6 年前

由于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;
    }

希望这会有帮助。