NextJS中用Map提取多角色值实现RBAC菜单权限验证问题

问题说明 #

开发NextJS的RBAC菜单时，单角色值（如'user'）的权限验证正常，但角色为数组形式（如['manager', 'admin']）时验证失效。当前通过map遍历菜单数组，只需调整角色判断逻辑，无需额外编写map。

现有代码 #

菜单数组 #

export const links = [
  {
    name: 'TIMETRACKER',
    href: '/dashboard/timetracker',
    icon: ClockIcon,
    role: 'user',
  },
 {
    name: 'MANAGE',
    href: '#',
    icon: HomeIcon,
    role: ['manager', 'admin'],
},
 {
    name: 'SETTINGS',
    href: '#',
    icon: HomeIcon,
    role: ['user', 'manager', 'admin'],
},
]

验证函数 #

{links?.map((link, indexItem) => {
  const LinkIcon = link.icon;
  return (
    <div key={indexItem} className="mt-2 md:mt-0">
      {!link.subitems && (link.role === userrole || link.role === '') ? (
        <ul>
          <li className="mr-2 inline-block md:mr-0 md:list-item">
            <Link
              key={link.name}
              href={link.href}
              className={clsx(
                'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
                { 'bg-sky-100 text-black': pathname === link.href },
              )}
            >
              <LinkIcon className="w-6" />
              <p className="hidden md:block">{link.name}</p>
            </Link>
          </li>
        </ul>
      ) : null }
    </div>
  );
})}

解决方案 #

核心是修改角色权限的判断逻辑，兼容字符串和数组两种角色格式：

修改后的验证函数代码 #

{links?.map((link, indexItem) => {
  const LinkIcon = link.icon;
  // 新增权限判断逻辑，兼容字符串/数组角色
  const hasPermission = Array.isArray(link.role) 
    ? link.role.includes(userrole) 
    : link.role === userrole || link.role === '';

  return (
    <div key={indexItem} className="mt-2 md:mt-0">
      {!link.subitems && hasPermission ? (
        <ul>
          <li className="mr-2 inline-block md:mr-0 md:list-item">
            <Link
              key={link.name}
              href={link.href}
              className={clsx(
                'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
                { 'bg-sky-100 text-black': pathname === link.href },
              )}
            >
              <LinkIcon className="w-6" />
              <p className="hidden md:block">{link.name}</p>
            </Link>
          </li>
        </ul>
      ) : null }
    </div>
  );
})}

逻辑说明 #

• Array.isArray(link.role)：判断当前菜单的角色是数组还是字符串类型
• 数组类型时，用includes(userrole)检查用户角色是否在允许的权限列表内
• 字符串类型时，保持原有的相等判断逻辑
• 无需额外编写map，仅在原遍历逻辑中调整权限判断条件即可

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