首页 > 解决方案 > 如何在菜单数组内的子菜单中过滤角色

问题描述

我有侧边栏-items.ts

export const ROUTES: RouteInfo[] = [
  {
    path: 'dashboard',
    title: 'dashboard',
    moduleName: 'dashboard',
    role: [Role.COMMUNITY_ADMIN, Role.BOARD_MEMBER,Role.CHAIRMAN,Role.OWNER,Role.TENANT],
    submenu: [],
  },
  {
    path: '',
    title: 'users',
    moduleName: 'users',
    role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
    submenu: [
      {
        path: 'persons',
        title: 'persons',
        moduleName: 'persons',
        role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
        submenu: [],
      },
      {
        path: 'users',
        title: 'users',
        moduleName: 'users',
        role: [Role.COMMUNITY_ADMIN],
        submenu: [],
      },
      {
        path: 'owner/list',
        title: 'owner',
        moduleName: 'owner',
        role: [Role.COMMUNITY_ADMIN, Role.OWNER, Role.TENANT, Role.BOARD_MEMBER, Role.CHAIRMAN],
        submenu: [],
      }
    ],
  },
  {....}]

我的用户登录具有角色“租户”。

我想显示只有 Role.TENANT 的菜单,为此我创建了一个过滤器,如下面的代码。此过滤器仅适用于菜单,不适用于子菜单。我想要一个子菜单过滤器,用户的子菜单。当我使用具有 TENANT 角色的帐户登录时,菜单中不会显示用户/用户,因为用户/用户只有角色:[Role.COMMUNITY_ADMIN]。

this.allowedCommunity = 'community/create';
this.currentUserLoggedIn = this.authService.currentUserLoggedInAccount;
const userRolesFiltered = this.currentUserLoggedIn.user?.user_roles?.filter(
  (userRole: any) =>
    formatDate(userRole.end_date, 'yyyy-MM-dd', 'en_US') >=
    formatDate(new Date(), 'yyyy-MM-dd', 'en_US')
);
this.sidebarItems = ROUTES.filter(
  (x) =>
    userRolesFiltered?.some((userRole: any) =>
      x.role.includes(userRole.role.name)
    )
)

请问有什么想法吗?

标签: arraysangulartypescriptfilter

解决方案


你去吧。检查我在StackBlitz的实现


推荐阅读