Скрытие menuItem для пользователей без прав администратора в Angular 2 - PullRequest
Новая
       11

Скрытие menuItem для пользователей без прав администратора в Angular 2

0 голосов
/ 30 мая 2018

Как я могу скрыть пункт меню Maintanence для пользователей, которые не являются администраторами?

У меня есть это в моем 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, я думаю, что что-то упустил ..

Чтобудет лучшим способом сделать это?Спасибо!

Ответы [ 4 ]

0 голосов
/ 30 мая 2018

Это сработало, добавив это в мой компонент пункта меню: 

 @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 = "userAdmin" в html.Спасибо за ответы!

0 голосов
/ 30 мая 2018

используйте * ngIf вокруг компонента nav.

Пожалуйста, не сохраняйте важную информацию в локальном хранилище, поскольку любой пользователь может манипулировать этими записями, используя встроенные функции в каждом современном браузере.Установка бита от 0 до 1 не проблема!

0 голосов
/ 30 мая 2018

Если вы хорошо используете библиотеку, которая обрабатывает подобные вещи, посмотрите в ngx-permissions .Он очень прост в использовании и решает вашу проблему.

0 голосов
/ 30 мая 2018

Я хотел бы добавить дополнительное поле к объекту меню, например 

{
    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 был истинным, и отображал его во всех других случаях.

...