基于权限的多级菜单抽屉导航返回异常：返回整组而非指定项

当前权限过滤逻辑存在漏洞：当检测到菜单组内存在有权限的子项时，直接保留了整个菜单组，未对组内子项做进一步过滤，导致无关菜单项也被返回。

需要修改权限过滤函数，递归处理多级菜单结构，仅保留具备权限的菜单项及其父级容器（保证菜单层级结构完整），而非保留整个父菜单组。

针对你的场景，调整后的核心过滤逻辑示例如下：

function filterMenuByPermission(menuItems, permissions) {
  return menuItems.reduce((acc, item) => {
    // 处理带子菜单的组项
    if (item.children) {
      const filteredChildren = filterMenuByPermission(item.children, permissions);
      // 仅当过滤后的子项不为空时，才保留该父组
      if (filteredChildren.length > 0) {
        acc.push({
          ...item,
          children: filteredChildren
        });
      }
    } else {
      // 单个菜单项直接匹配权限
      if (permissions.includes(item.permission)) {
        acc.push(item);
      }
    }
    return acc;
  }, []);
}

• 递归遍历所有菜单层级，对每个菜单项做判断：
  1. 若为菜单组（含children属性），先递归过滤其子项，只有当子项过滤后不为空时，才保留该组并替换为过滤后的子项
  2. 若为单个菜单项，检查其permission是否在用户权限列表中，匹配则保留
• 最终得到的菜单结构仅包含有权限的菜单项，以及维持层级所需的父级容器

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