将中间件的用户权限与 Next.js 14 中的菜单项集成

Question

我目前正在开发一个 Next.js 14 项目，在该项目中，我使用中间件实现 User.Read 和 Role.Read 等权限来控制用户对网站某些部分的访问。虽然此设置运行良好，但我在将从中间件获得的权限与我的菜单项（在名为 menu.tsx 的文件中定义）集成方面面临着挑战。

这是我的 menu.tsx 文件的简化版本：

// menu.tsx
export const Menu: MenuProps[] = [
  {
    href: '/dashboard',
    icon: <Gauge size={20} />,
    title: 'Dashboard',
  },
  // Other menu items...
];

问题的根源在于，权限是在 accessToken 中接收的，而 accessToken 存储在安全的、仅限 HTTP 的 cookie 中。我的目标是根据从中间件获得的权限动态显示或隐藏菜单项。

我的问题是：如何有效将从中间件获得的权限传递给我的menu.tsx文件中的Menu常量数组？

Answer 1

您可以使用状态管理库，例如Zusstand。
例如，当您的用户登录时，您可以获取所有用户权限，例如“查看仪表板”，并且每次渲染菜单时，您可以搜索在 zustand 状态下 x 用户是否对菜单的该部分具有 y 权限。

我在我的应用程序中使用的（不是在权限管理的上下文中）是这样的：

export const useGlobals = create<Globals>((set, get) => ({
    user: undefined,
    setUser: (state: Object) => set({ user: state }),
}));

在您的情况下，您可以简单地在用户对象（或单独的对象）中附加用户权限。

因此，在您的中间件中，您可以访问此状态并查找用户是否有权访问所需页面。

Answer 2

选项 1.如果您的访问令牌是 JWT 令牌，您可以在前端解析并访问用户的权限。

选项 2。如果您的权限存储在 api 中但未包含在令牌中，您将需要创建一个新的 api 调用来返回该令牌可用的权限列表。