如何在JavaScript中基于权限对象过滤对象数组？

我来帮你搞定这个权限过滤的问题！你现在遇到的核心问题是：用从数据库拿到的permissionObj数组过滤静态侧边栏PubSidebar时，那些没有权限的Corrections相关项没被正确过滤掉。咱们一步步来修复这个问题。

先明确数据源结构 #

首先看你的两个核心数据：

权限数组 permissionObj #

let permissionObj = [{ "OA deal": [{ label: "can view", value: "can_view" }, { label: "can create", value: "can_create" }, { label: "can edit", value: "can_edit" }, { label: "can delete", value: "can_delete" } ] }, { "Deposit": [{ label: "can view", value: "can_view" }, { label: "can create", value: "can_create" }, { label: "can edit", value: "can_edit" }, { label: "can delete", value: "can_delete" } ] }, { "Journals": [{ label: "can view", value: "can_view" }, { label: "can create", value: "can_create" }, { label: "can edit", value: "can_edit" }, { label: "can delete", value: "can_delete" }] }, { "Deposit": [{ label: "can view", value: "can_view" }, { label: "can create", value: "can_create" }, { label: "can edit", value: "can_edit" }, { label: "can delete", value: "can_delete" }] }, { "OA deals request": [] }, { "Deposit Approval": [] }, { "Dashboard": [{ label: "can view", value: "can_view" }, { label: "can create", value: "can_create" }, { label: "can edit", value: "can_edit" }, { label: "can delete", value: "can_delete" }] }, ]

静态侧边栏数据 PubSidebar #

const PubSidebar = [{ label: "Dashboard", key: "Dashboard", value: "can_view" }, { label: "Settings", key: "Settings", value: "can_view" }, { label: "OA deal activities", key:"OA Deal" || "Deposit"|| "Corrections" , content: [{ label: "Add oadeal", key: "OA deal", value: "can_create" }, { label: "edit oadeal ", key: "OA deal", value: "can_edit" }, { label: "view oadeal ", key: "OA deal", value: "can_view" }, { label: "Deposit for view", key: "Deposit", value: "can_view" }, { label: "Deposit for edit", key: "Deposit", value: "can_edit" }, { key: "Deposit", value: "can_edit" }, { label: "edit Corrections", key: "Corrections", value: "can_edit" }, { label: "Add Corrections", key: "Corrections", value: "can_create" }, { label: "view Corrections", key: "Corrections", value: "can_view" } ] }, { key:"Journals", label: "Journal for publishers", content: [{ label: "Add Journal", key: "Journals", value: "can_create" }, { label: "Journals List", key: "Journals", value: "can_view" }, ] }, ];

现有代码的问题 #

你当前的代码有两个关键漏洞：

1. 父项key逻辑无效：OA deal activities的key写的"OA Deal" || "Deposit"|| "Corrections"是错误的——逻辑或运算会直接返回第一个真值"OA Deal"，导致代码完全没处理Deposit和Corrections的子项权限判断。
2. 子项权限判断逻辑错误：你用父项的key去匹配子项的权限，而不是用子项自己的key去查对应的权限，这就导致Corrections的子项根本没被检查到（因为父项key是OA Deal，代码不会去验证子项的Corrections权限）。

修正后的解决方案 #

咱们先把permissionObj转换成一个权限映射表，让权限查询更高效；再遍历PubSidebar逐个验证父项和子项的权限：

步骤1：构建权限映射表 #

把permissionObj转成{ 模块名称: [权限value数组] }的结构，方便快速查询：

// 去重并构建权限映射，统一转小写避免大小写匹配问题
const permissionMap = permissionObj.reduce((map, item) => {
  const moduleName = Object.keys(item)[0].toLowerCase();
  // 去重同一模块的重复权限
  const permissions = [...new Set(item[moduleName].map(p => p.value.toLowerCase()))];
  map[moduleName] = permissions;
  return map;
}, {});

步骤2：过滤PubSidebar数组 #

遍历每个侧边栏项，分别处理无content的单一项和有content的父项：

const filteredSidebar = PubSidebar.filter(item => {
  // 处理没有content的单一项
  if (!item.content) {
    const modulePermissions = permissionMap[item.key.toLowerCase()];
    // 检查模块是否存在，且包含所需权限
    return modulePermissions && modulePermissions.includes(item.value.toLowerCase());
  }

  // 处理有content的父项：先过滤子项
  item.content = item.content.filter(subItem => {
    const subModule = subItem.key.toLowerCase();
    const requiredPerm = subItem.value.toLowerCase();
    // 检查子项对应的模块是否有权限，且包含所需权限
    return permissionMap[subModule] && permissionMap[subModule].includes(requiredPerm);
  });

  // 父项只有在过滤后的content不为空时才保留
  return item.content.length > 0;
});

最终效果 #

运行上面的代码后，filteredSidebar就是你想要的结果：

const output = [{ label: "Dashboard", key: "Dashboard", value: "can_view" }, { label: "OA deal activities", key: "OA Deal", content: [{ label: "Add oadeal", key: "OA deal", value: "can_create" }, { label: "edit oadeal ", key: "OA deal", value: "can_edit" }, { label: "view oadeal ", key: "OA deal", value: "can_view" }, { label: "Deposit for view", key: "Deposit", value: "can_view" }, { label: "Deposit for edit", key: "Deposit", value: "can_edit" }, { key: "Deposit", value: "can_edit" }] }, { key: "Journals", label: "Journal for publishers", content: [{ label: "Add Journal", key: "Journals", value: "can_create" }, { label: "Journals List", key: "Journals", value: "can_view" }] }];

这里Corrections相关的子项因为permissionMap里没有对应的权限，全部被过滤掉了，同时也去掉了没有权限的Settings项，完全符合你的预期。

内容的提问来源于stack exchange，提问作者sujon