【发布时间】：2021-06-20 04:00:19
【问题描述】：
我也在开发一个 Angular 应用程序实现的登录。我维护了 menu-items.ts，从中获取所有菜单并循环浏览它们并显示它们。我在登录时收到菜单名称和“读/写”权限。现在我想根据角色和权限隐藏/显示组件中的菜单和元素。怎么能达到同样的效果？ 孩子们指导我。
const MENUITEMS: IMenuItem[] = [
{
name: 'Admin',
type: 'main',
icon: 'apps',
isActive: true,
isMenuActive: false,
children: [
{
name: 'Admin Menu',
type: 'sub-menu',
isActive: false,
isMenuActive: false,
subchildren: [
{
state: 'admin-menu-listing',
type: 'sub-child-menu',
isMenuActive: false,
isActive: false,
name: 'Admin Menu List',
},
{
state: 'admin-menu-listing/add-menu',
type: 'sub-child-menu',
isMenuActive: false,
isActive: false,
name: 'Add Admin Menu',
},
{
state: 'admin-menu-listing/reorder-menu',
type: 'sub-child-menu',
isMenuActive: false,
isActive: false,
name: 'Reorder Admin Menu',
},
],
},
{
name: 'Role',
type: 'sub-menu',
isActive: true,
isMenuActive: false,
subchildren: [
{
state: 'admin-roles',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Role List',
},
{
state: 'admin-roles/add-role',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Add Role',
},
// {
// state: 'admin-roles/edit-menu-permission',
// type: 'sub-child-menu',
// isMenuActive: false,
// isActive: true,
// name: 'EDIT MENU PERMISSION',
// },
// {
// state: 'admin-roles/edit-module-permission',
// type: 'sub-child-menu',
// isMenuActive: false,
// isActive: true,
// name: 'EDIT MODULE PERMISSION',
// },
],
},
{
name: 'User',
type: 'sub-menu',
isActive: true,
isMenuActive: false,
subchildren: [
{
state: 'manage-user-listing',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'User List',
},
{
state: 'manage-user-listing/add-user',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Add User',
},
],
},
{
name: 'Workflow',
type: 'sub-menu',
isActive: true,
isMenuActive: false,
subchildren: [
{
state: 'manage-workflow-listing',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Workflow List',
},
{
state: 'manage-workflow-listing/add-workflow',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Add Workflow',
},
{
state: 'manage-workflow-listing/assigned-workflow-listing',
type: 'sub-child-menu',
isActive: true,
isMenuActive: false,
name: 'Assigned Workflow List',
},
{
state: 'manage-workflow-listing/assign-workflow',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Assign Workflow',
},
{
state: 'manage-workflow-listing/map-workflow-listing',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Map Workflow List',
},
{
state: 'manage-workflow-listing/add-map-workflow',
type: 'sub-child-menu',
isMenuActive: false,
isActive: true,
name: 'Map Workflow',
},
],
},
],
}
]
// roles & permission received from backend
{"modulePermissionList":[{"moduleName":"MENU","permissionList":[{"permissionId":1,"permissionName":"READ"},{"permissionId":2,"permissionName":"WRITE"}]}],"user":{"id":12,"email":"test@neosoftmail.com","firstName":"Test ","lastName":"User"},"iat":1616482774,"exp":1616569174} <ng-container *ngFor="let item of menuItems.getAll()">
<ul class="menu-level-one">
<li [ngClass]="{ 'active-one': item.isMenuActive }" (click)="onMainMenu(item)">
<a [routerLink]="item.state ? [item.state] : []" *ngIf="item.isActive">
{{ item.name }}
<mat-icon class="menu-caret" *ngIf="item.children">arrow_drop_down</mat-icon>
</a>
<ng-container *ngIf="item.children">
<ng-container *ngFor="let child of item.children">
<ul class="menu-level-two">
<li [ngClass]="{ 'active-two': child.isMenuActive }" (click)="onSubMenu(child, $event)">
<a [routerLink]="child.state ? [child.state] : []" *ngIf="child.isActive">
{{ child.name }}
<mat-icon class="menu-caret" *ngIf="child.subchildren">arrow_drop_down</mat-icon>
</a>
<ng-container *ngIf="child.subchildren">
<ng-container *ngFor="let subChild of child.subchildren">
<ul class="menu-level-three">
<li
[ngClass]="{ 'active-three': subChild.isMenuActive }"
(click)="onSubChildMenu(subChild, $event)"
>
<a [routerLink]="subChild.state ? [subChild.state] : []" *ngIf="subChild.isActive">
{{ subChild.name }}
<mat-icon class="menu-caret" *ngIf="subChild.subChildSubMenu"
>arrow_drop_down</mat-icon
>
</a>
<ng-container *ngIf="child.subchildren">
<ul class="menu-level-four">
<ng-container *ngFor="let subChildSub of subChild.subChildSubMenu">
<li
[ngClass]="{ 'active-four': subChildSub.isMenuActive }"
(click)="onSubChildSubMenu(subChildSub, $event)"
>
<a
[routerLink]="subChildSub.state ? [subChildSub.state] : []"
*ngIf="subChildSub.isActive"
>
{{ subChildSub.name }}
</a>
</li>
</ng-container>
</ul>
</ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</li>
</ul>
</ng-container>【问题讨论】：
标签： javascript html jquery angular