由于我所工作的公司的复杂性,我们有多个部门,每个部门中都有许多角色。因此,使用管理员,员工和用户的典型角色根本不会削减成本。因此,我正在使用位操作为每个部门/角色分配一个值,以防止复杂的用户访问控制字符串(用于路由和菜单)。
我有下面的代码,但是无论我做什么,我都无法根据UAC值使菜单项的子项可见或不可见。
import { Injectable } from '@angular/core';
export interface BadgeItem {
type: string;
value: string;
}
export interface Saperator {
name: string;
type ? : string;
}
export interface ChildrenItems {
state: string;
name: string;
type ? : string;
}
export interface Menu {
state: string;
name: string;
type: string;
icon: string;
badge ? : BadgeItem[];
saperator ? : Saperator[];
children ? : ChildrenItems[];
}
const MENUITEMS = [
{
state: '',
name: 'Personal',
type: 'saperator',
icon: 'av_timer'
},
{
state: 'dashboards',
name: 'Dashboards',
type: 'sub',
icon: 'av_timer',
children: [
{ state: 'dashboard1', name: 'Dashboard 1', UAC: 0 },
{ state: 'dashboard2', name: 'Dashboard 2', UAC: 128 },
]
},
{
state: 'apps',
name: 'Apps',
type: 'sub',
icon: 'apps',
children: [
{ state: 'calendar', name: 'Calendar' },
{ state: 'messages', name: 'Mail box' },
{ state: 'chat', name: 'Chat' },
{ state: 'taskboard', name: 'Taskboard' }
],
UAC: 256
},
{
state: '',
name: 'Forms, Table & Widgets',
type: 'saperator',
icon: 'av_timer'
}, {
state: 'datatables',
name: 'Data Tables',
type: 'sub',
icon: 'border_all',
children: [
{ state: 'basicdatatable', name: 'Basic Data Table' },
{ state: 'filter', name: 'Filterable' },
{ state: 'editing', name: 'Editing' },
]
}, {
state: 'pages',
name: 'Pages',
type: 'sub',
icon: 'content_copy',
children: [
{ state: 'icons', name: 'Material Icons' },
{ state: 'timeline', name: 'Timeline' },
{ state: 'invoice', name: 'Invoice' },
{ state: 'pricing', name: 'Pricing' },
{ state: 'helper', name: 'Helper Classes' }
]
}
];
@Injectable()
export class MenuItems {
getMenuitem(): Menu[] {
// Get the JSON form of the stored user object
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
// If the user has logged in, then this user object will be non null
if (currentUser && currentUser.token)
{
var filtered_MENUITEMS = MENUITEMS.filter(obj => {
let parentUAC: boolean = true;
// Or are we using a UAC value instead.
if(obj.UAC)
{
// Current User UAC could be 256, using bit manipulation for the number of departments and roles.
parentUAC = ((obj.UAC & currentUser.UAC) > 0) ? true : false;
}
// We are going to show the parent, now check the children.
if( (parentUAC == true) && (obj.children) )
{
// Need code in here to check for children of the menu item and removing if it's not meant to be visible.
}
return parentUAC;
});
return filtered_MENUITEMS;
}
else
{
return MENUITEMS;
}
}
}
我认为让我感到困惑的问题是,我试图从已过滤的OBJ中删除子菜单或子菜单项,而应从主菜单对象中将其删除。
我是Angular的新手,所以非常感谢您的帮助。
感谢阅读。
答案 0 :(得分:1)
我将您的默认parentUAC
更改为false
let parentUAC: boolean = false;
然后我将您的parentUAC
比较更改为此。
parentUAC = obj.UAC == currentUser.UAC ? true : false;
然后我使用该视图控制是否显示children
个项目。
<button mat-button [matMenuTriggerFor]="menu3">Menu With UAC 256</button>
<mat-menu #menu3="matMenu">
<div *ngFor="let item of getMenuitem({token:'1234', UAC:'256'})">
<button *ngIf="!item.children" mat-menu-item>{{item.name}}</button>
<button *ngIf="item.children" mat-menu-item [matMenuTriggerFor]="submenu">{{item.name}}</button>
<mat-menu #submenu="matMenu">
<button mat-menu-item *ngFor="let subItem of item.children">{{subItem.name}}</button>
</mat-menu>
</div>
</mat-menu>
请参阅修订后的堆叠闪电战中的Menu With UAC 256
。
Stackblitz
https://stackblitz.com/edit/angular-v43gjg?embed=1&file=app/menu-overview-example.ts
答案 1 :(得分:0)
这是我最终使用的代码,以防万一将来对任何人有帮助。
static::class
这就是当前代码的样子,毫无疑问,随着项目的进行它将对其进行调整。