根据 Next.js 中的用户角色管理仪表板菜单项

Question

我使用 Next.js 来管理身份验证。登录后，用户进入仪表板，其中有几个菜单项，根据用户的访问级别向用户显示。

现在，出于安全原因，我希望从服务器端发送仪表板菜单项列表，用户即使查看应用程序的源代码也无法看到菜单总数。

例如：

如果用户以管理员角色登录，菜单项列表：

Dashboard
servers
User management
Management of teams

如果用户以普通用户角色登录，菜单项列表：

Dashboard

您建议什么好的解决方案来解决这个问题？

Answer 1

这是我如何根据 next.js 中的角色创建反应式菜单

首先我创建了一个像这样的对象数组

[{
id: "some unique name for each menu item",  
href: "/test/test/",
icon: "fa fa-address-book",
label: "search",
role : [  "admin"]}]

所以之后我有了从上下文中获得的变量名称角色，你可以从其他地方获得

 const {role} = useContext(FormContext)

   const final menu link = itemsDict.filter((menu) => {
    return menu.role.includes(role)
  })

之后，如果您有一些子菜单或一些自定义内容，您需要添加额外的逻辑，那么您显然可以根据过滤结果生成链接 希望有帮助