在 Angular 2 中为非管理员用户隐藏 menuItem

Question

如何为非管理员用户隐藏维护菜单项？

我的 app.menu.ts 里有这个：

import { MenuItem } from '../fw/services/menu.service';

export let initialMenuItems: Array<MenuItem> = [
  {
    text: 'Dashboard',
    icon: 'glyphicon-dashboard',
    route: '/authenticated/dashboard',
    submenu: null
  },
  {
    text: 'Books',
    icon: 'glyphicon-book',
    route: null,
    submenu: [{...}]
  },
  {
    text: 'Authors',
    icon: 'glyphicon-user',
    route: null,
    submenu: [{...}],
  },
  {
    text: 'Maintenance',
    icon: 'glyphicon-wrench',
    route: null,
    submenu: [{...}]
  }]

我的menu.service.ts

import { Injectable } from '@angular/core';

export interface MenuItem {
  text: string,
  icon: string,
  route: string,
  submenu: Array<MenuItem>
}

@Injectable()
export class MenuService {

 items: Array<MenuItem>;
 isVertical = false;
 showingLeftSideMenu = false;
 displayMaintainance = false;

 showMaintenance() {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser.isAdmin === true) {
       return true;
    } else {
     return false;
    }
 };

}

我设法使维护链接无法通过这样的 isAdminGuard 访问，但我宁愿完全隐藏菜单，这样更有意义。

 { path: 'book-detail/:id/:operation', component: BookDetailComponent, canActivate: [IsAdminGuard] }

我也有那个 showMaintanence() 函数，但我并没有真正设法在 app.menu.ts 中使用它，我想我遗漏了一些东西..

最好的方法是什么？谢谢！

Answer 1

我要做的是向菜单对象添加一个额外的字段，例如

{
    text: 'Maintenance',
    icon: 'glyphicon-wrench',
    route: null,
    submenu: [{...}],
    admin: true
}

然后使用类似

的方法

public displayItem(userIsAdmin, menuItemIsAdmin) {
    return isAdmin || !menuItemIsAdmin
}

然后在 HTML 的菜单模板中，在循环期间我会使用 [hidden]=displayItem(user.isAdmin, item.admin)。你仍然需要逻辑上的守卫，但如果 user.isAdmin 为假且 item.admin 为真，它会隐藏 UI，并在所有其他情况下显示它。

Answer 2

在导航组件周围使用 *ngIf。

请不要将重要信息保存在本地存储中，因为任何用户都可以使用每个现代浏览器中的内置功能来操纵这些条目。将位从 0 设置为 1 完全没有问题！

Answer 3

如果您可以使用处理此类内容的库，请查看 ngx-permissions。超级好用，解决你的问题。

Answer 4

它通过将其添加到我的菜单项组件中起作用：

 @Input() item = <MenuItem>null;
 userAdmin = true;

  ngOnInit() : void {

   var currentUser = JSON.parse(localStorage.getItem('currentUser'));
   if (currentUser.isAdmin === false && this.item.text === 'Maintenance') {
        this.userAdmin = false;
   }
   ...
  }

和html中的*ngIf="userAdmin"。感谢您的回答！

在 Angular 2 中为非管理员用户隐藏 menuItem

Hiding menuItem for non admin users in Angular 2

menuitem

angular