根据用户权限过滤菜单

原创

挥刀北上

发布于 2024-11-28 02:42:05

18800

代码可运行

文章被收录于专栏：编程思维编程思维

运行总次数：0

代码可运行

在 JavaScript 中，你可以使用 filter() 方法来根据用户权限过滤菜单。以下是一个示例：

JavaScriptconst menu = [
  { name: "Home", permission: "view" },
  { name: "Profile", permission: "view" },
  { name: "Settings", permission: "edit" },
];

const userPermissions = ["view"];

const filteredMenu = menu.filter(item => userPermissions.includes(item.permission));

console.log(filteredMenu);
// Output: [{ name: "Home", permission: "view" }, { name: "Profile", permission: "view" }]

在这个示例中，我们首先定义了一个包含菜单项的数组。然后，我们定义了一个包含用户权限的数组。最后，我们使用 filter() 方法过滤菜单项，只保留那些权限在用户权限数组中的菜单项。

请注意，这个示例假设菜单项的权限是一个字符串，用户权限是一个字符串数组。如果你的数据结构不同，你可能需要修改这个示例以适应你的数据结构。

如果你有嵌套的菜单项，你可能需要使用递归来处理它们。以下是一个示例：

JavaScriptconst menu = [
  {
    name: "Home",
    permission: "view",
    children: [
      { name: "Submenu 1", permission: "view" },
      { name: "Submenu 2", permission: "edit" },
    ],
  },
  {
    name: "Profile",
    permission: "view",
    children: [
      { name: "Submenu 3", permission: "view" },
      { name: "Submenu 4", permission: "edit" },
    ],
  },
];

const userPermissions = ["view"];

const filterMenu = (menu, permissions) => {
  return menu
    .filter(item => permissions.includes(item.permission))
    .map(item => ({
      ...item,
      children: item.children ? filterMenu(item.children, permissions) : null,
    }));
};

const filteredMenu = filterMenu(menu, userPermissions);

console.log(filteredMenu);
// Output: [
//   { name: "Home", permission: "view", children: [{ name: "Submenu 1", permission: "view" }] },
//   { name: "Profile", permission: "view", children: [{ name: "Submenu 3", permission: "view" }] }
// ]