Question

如何为非管理员用户隐藏Maintanence menuItem？

我的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

我要做的是在菜单对象中添加一个额外的字段，比如

const FirstMatTab = createMaterialTopTabNavigator({//Routes here});
const SecondMatTab = createMaterialTopTabNavigator({//Routes here});

const TabNav = createBottomTabNavigator({
    FirstTab: FirstMatTab,
    SecondTab: SecondMatTab
});

const MainStack = createStackNavigator({
    Tab: TabNav,
})

然后使用像

这样的方法

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

然后在HTML中菜单的模板中，在循环过程中我会使用public displayItem(userIsAdmin, menuItemIsAdmin) { return isAdmin || !menuItemIsAdmin }。你仍然需要一个逻辑中的守卫，但如果[hidden]=displayItem(user.isAdmin, item.admin)为假，user.isAdmin为真，它会隐藏UI，并在所有其他情况下显示它。

Answer 2

如果您可以使用处理此类内容的库，请查看ngx-permissions。它非常易于使用并解决您的问题。

Answer 3

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

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

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

并且* ngIf =＆＃34; userAdmin＆＃34;在HTML中。谢谢你的答案！

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

4 个答案: