在Angular 2中隐藏非管理员用户的菜单项

如何隐藏非管理员用户的Maintanance菜单项

我的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: [{...}]
  }]

我也有showmainance（）函数，但我没有在app.menu.ts中真正使用它，我想我遗漏了一些东西

---

最好的方法是什么？谢谢

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

{
    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

为false，而

item.admin

为true，则会隐藏UI，并在所有其他情况下显示它。

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

{
    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

为false，而

item.admin

为true，则会隐藏UI，并在所有其他情况下显示它。

在导航组件周围使用*ngIf

---

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

在导航组件周围使用*ngIf

---

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

如果你可以使用一个可以处理类似内容的库，那么就去看看吧。它非常易于使用，解决了您的问题。

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

将此功能添加到“我的菜单项”组件中，起到了作用：

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

@Input（）项=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”。谢谢你的回答

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

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

@Input（）项=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”。谢谢你的回答

您的导航HTML代码是什么样子的？您不使用app.menu.ts中的ShowMaintence（）是什么意思？最简单的方法是在那里使用它，然后决定是否显示或隐藏菜单需求，以及如何执行此操作？我尝试创建一个额外的字段并访问其中的函数，但它不起作用。导航的HTML代码是什么样子的？你怎么说你没有使用app.menu.ts中的showmainance（）呢？最简单的方法是在那里使用它，然后决定是否显示或隐藏菜单需求，以及如何执行此操作？我试着创建一个额外的字段并访问其中的函数，但这不起作用。更安全的做法是假设整个前端客户端可以由用户随意编辑，而不必担心他们会弄乱低级的东西。更好的做法是保护您的API，让应用程序停止工作，因为它们会乱来。更安全的做法是假设整个前端客户端可以由用户随意编辑，而不必太担心它们会乱来。更好的办法是保护您的API，并让应用程序停止工作，因为它们乱来了。