JavaScript 怎么处理接口返回的用户权限列表并进行菜单过滤-js教程-PHP中文网

javascript菜单过滤核心是比对权限标识与本地菜单的permission字段：支持字符串数组或对象格式权限，递归处理嵌套菜单，兼容通配符匹配（如user:*），并需结合路由守卫实现真正权限控制。

javascript 怎么处理接口返回的用户权限列表并进行菜单过滤

JavaScript 处理接口返回的用户权限列表并做菜单过滤，核心是：拿到权限标识（如字符串数组或对象），再和本地菜单配置逐项比对，保留有权限的菜单项。关键在于权限字段设计、菜单结构定义、以及过滤逻辑的健壮性。

明确权限数据格式和菜单结构

权限接口通常返回类似这样的数据：

字符串数组：["user:read", "order:edit", "admin:dashboard"]
对象形式（含操作类型）：{ "user": ["read", "write"], "order": ["edit"] }

本地菜单一般是一个嵌套数组或树形结构，每项含 id、name、path 和关键的 permission 字段（用于校验）：

[
  { id: 'dashboard', name: '首页', path: '/dashboard', permission: 'admin:dashboard' },
  { id: 'user', name: '用户管理', path: '/user', permission: 'user:read' },
  { id: 'order', name: '订单管理', path: '/order', permission: 'order:edit' }
]

基础过滤：用 includes 或 some 匹配权限

如果权限是字符串数组，直接用 includes 判断菜单项是否在权限列表中：

const userPermissions = ['user:read', 'order:edit'];
const menuList = [/* 上面的菜单数组 */];
<p>const filteredMenu = menuList.filter(item => 
item.permission && userPermissions.includes(item.permission)
);</p>

若菜单含子项（如二级菜单），需递归处理：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function filterMenuByPermission(menu, permissions) {
  return menu
    .filter(item => !item.permission || permissions.includes(item.permission))
    .map(item => ({
      ...item,
      children: item.children 
        ? filterMenuByPermission(item.children, permissions) 
        : undefined
    }))
    .filter(item => item.children?.length || !item.children);
}

进阶匹配：支持通配符或层级权限（如 user:*）

实际项目中常需支持模糊匹配，例如权限 "user:*" 应允许访问所有 user 相关菜单（user:read、user:edit）：

写一个辅助函数判断是否匹配：hasPermission('user:read', ['user:*', 'order:edit']) → true
对每个 permission 字段，检查是否存在完全匹配，或存在 xxx:* 形式覆盖
注意顺序：精确匹配优先于通配符，避免误放行

示例匹配逻辑：

function matchPermission(required, permissions) {
  if (!required) return true;
  return permissions.some(p => {
    if (p.endsWith(':*')) {
      const prefix = p.slice(0, -2);
      return required.startsWith(prefix + ':');
    }
    return p === required;
  });
}
<p>const filtered = menuList.filter(item => 
matchPermission(item.permission, userPermissions)
);</p>