typescript 有条件地构建/修改对象的嵌套数组

zpgglvta  于 2023-06-24  发布在  TypeScript
关注(0)|答案(1)|浏览(141)

我正在尝试建立一个基于用户权限的菜单。下面是上述数组的一个简化示例:

this.model = [
    {
        label: "Admin",
        items: [
            {
                label: "Users",
                icon: "fas fa-list",
                routerLink: ["/admin/users/"],
            },
            {
                label: "Clients",
                icon: "fas fa-list",
                items: [
                    {
                        label: "List",
                        icon: "fas fa-list",
                        routerLink: ["/client/list"],
                    },
                    {
                        label: "Create",
                        icon: "fas fa-list",
                        routerLink: ["/client/create/"],
                    },
                ],
            },
        ],
    },
];

这个数组负责在其各自的组件中生成菜单标签,如下所示:

<ul class="layout-menu">
    <ng-container *ngFor="let item of model; let i = index;">
        <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
        <li *ngIf="item.separator" class="menu-separator"></li>
    </ng-container>
</ul>

现在,我在sessionStorage中存储了一系列用户权限作为访问的布尔值。我需要使用这些权限来根据它们从菜单中添加或删除项目。
例如,如果“canCreateClients”为false,则菜单的“/client/create/”部分不应出现。
我对如何使用三元运算符在JSON中应用条件值有一个大致的想法,但这是一个对象数组,由于下拉菜单项,可以无限嵌套,所以它最终也会有嵌套运算符。
我可以通过在临时变量中创建整个数组来解决这个问题,然后根据权限单独删除每个对象。然而,这很不切实际。
对此,什么是好的解决方案?

ltskdhd1

ltskdhd11#

对于这种类型的场景,一个健壮的通用解决方案可能是矫枉过正。我的方法是在站点Map数据中包含必要的权限布尔值,并让呈现模板比较所需的权限和用户的权限,以决定是否呈现该特定项。
所以一个单独的项目可能看起来像

{
   label: "Create",
   icon: "fas fa-list",
   routerLink: ["/client/create/"],
   permissionReqired: "canCreateClients"
}

当你的呈现代码递归遍历树中的每一项时,它可以将“permissionRequired”键的内容与特定用户的权限数组进行比较。我对Angular已经生疏了,所以我不会尝试把它编码出来,但是伪代码会沿着

usersPermissions= ['canCreateClients', 'canDoTheThing'] // loaded from user data somewhere

if (!item.permissionRequired || usersPermissions.includes(item.permissionRequired)) {
  // render the item
}

这样你就只需要担心一个树,所有不同的权限要求都记录在里面,渲染代码不必包含很多条件,它只需要将一个字段与一个数组进行比较,看看它们是否匹配。

相关问题