Question

如何为特定用户隐藏导航菜单中的名称。即，我想为安装了“用户”角色的用户隐藏“管理”。也就是说，如果用户以用户角色登录，则菜单列表中的名称“ Administration”将对他隐藏。

ts：

import { Component, OnInit } from '@angular/core';
import {AuthService} from "../../services/auth/auth.service";

export interface RouteInfo {
    path: string;
    title: string;
    icon: string;
    class: string;
}

export const ROUTES: RouteInfo[] = [
    { path: 'notes',  title: 'Notes',  icon: 'ti-comment', class: '' },
    { path: 'contacts', title: 'Contacts',  icon:'ti-info', class: '' },
    { path: 'users', title: 'Users',  icon:'ti-user', class: '' },
    { path: 'user_notes', title: 'Notes (World)',  icon:'ti-world', class: '' },
    { path: 'admins', title: 'Administration',  icon:'ti-server', class: '' }
];

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})

export class SidebarComponent implements OnInit {
  public menuItems: any[];

  constructor(
    public authService:AuthService
) {}

  ngOnInit() {
      this.menuItems = ROUTES.filter(menuItem => menuItem);
  }

}

html：

...
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
  <a [routerLink]="[menuItem.path]">
    <i class="{{menuItem.icon}}"></i>
    <p>{{menuItem.title}}</p>
  </a>
</li>
...

Answer 1

您可以在UITextfield中再添加一个字段role。在过滤菜单时，您可以检查该菜单项是否允许ROUTES。

currentRole

Answer 2

首先，有必要从AuthService获得用户角色，然后根据其角色过滤路由。我假设AuthService对API进行了异步调用。

以这种方式：

ngOnInit() {
  this.authService.getCurrentUser().subscribe(user => {
    this.menuItems = ROUTES.filter(menuItem => {
      return menuItem.path !== 'admins' || menuItem.path === 'admins' && user.role === 'admin';
    });
  });
}

如何在导航菜单中隐藏名称？

2 个答案: