前端项目如何做菜单权限的配置-CSDN博客

本文链接：https://blog.csdn.net/m0_61998604/article/details/141602903

实现菜单权限的配置通常涉及以下几个步骤：

1. 定义权限数据结构

首先，定义好角色和权限的关系。通常我们会有一个权限列表，每个权限对应一个或多个菜单项。


const permissions = {
  viewDashboard: 'VIEW_DASHBOARD',
  viewUsers: 'VIEW_USERS',
  manageUsers: 'MANAGE_USERS',
  viewSettings: 'VIEW_SETTINGS',
};

// 菜单结构
const menuItems = [
  {
    key: 'dashboard',
    title: 'Dashboard',
    permission: permissions.viewDashboard,  
  },
  {
    key: 'users',
    title: 'Users',
    permission: permissions.viewUsers,  
    children: [
      {
        key: 'manageUsers',
        title: 'Manage Users',
        permission: permissions.manageUsers,
      },
    ],
  },
  {
    key: 'settings',
    title: 'Settings',
    permission: permissions.viewSettings, 
  },
];

2. 定义用户角色和权限

在用户登录时，通常从服务器获取用户的角色及其拥有的权限。这些信息可以通过 API 请求获取，并存储在应用的状态管理中（如 Redux、MobX 或 Context API）或在内存中（如 React 的 useState）。


const userPermissions = [
  'VIEW_DASHBOARD',
  'VIEW_USERS',
];

3. 过滤菜单项

根据用户的权限过滤菜单，生成用户可见的菜单项。


const filterMenuItems = (items, userPermissions) => {
  return items.filter(item => {

    if (userPermissions.includes(item.permission)) {
      // 如果这个菜单项有子菜单，递归过滤子菜单
      if (item.children) {
        item.children = filterMenuItems(item.children, userPermissions);
      }
      return true;
    }
    return false;
  });
};


const userMenu = filterMenuItems(menuItems, userPermissions);

4. 动态渲染菜单

根据过滤后的菜单结构动态渲染菜单。这一步通常与前端框架的路由配置结合在一起

import { Menu } from 'antd';

const renderMenu = (menuItems) => {
  return menuItems.map(item => {
    if (item.children) {
      return (
        <Menu.SubMenu key={item.key} title={item.title}>
          {renderMenu(item.children)}
        </Menu.SubMenu>
      );
    }
    return <Menu.Item key={item.key}>{item.title}</Menu.Item>;
  });
};

const AppMenu = () => {
  return (
    <Menu>
      {renderMenu(userMenu)}
    </Menu>
  );
};

5. 权限控制路由

除了在菜单中控制权限，通常还需要在路由中进行控制，防止用户通过 URL 直接访问没有权限的页面。

import { Route, Redirect } from 'react-router-dom';


const PrivateRoute = ({ component: Component, permission, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      userPermissions.includes(permission) ? (
        <Component {...props} />
      ) : (
        <Redirect to="/not-authorized" />
      )
    }
  />
);


<PrivateRoute path="/dashboard" component={Dashboard} permission={permissions.viewDashboard} />
<PrivateRoute path="/users/manage" component={ManageUsers} permission={permissions.manageUsers} />