当前位置：首页 > React

react实现菜单权限控制

2026-01-27 10:49:37React

实现菜单权限控制的核心思路

在React中实现菜单权限控制通常需要结合后端返回的用户权限数据，动态渲染菜单项。以下是几种常见的实现方式：

基于角色权限的菜单控制

定义角色与菜单项的映射关系，根据用户角色过滤可访问的菜单：

const menuItems = [
  { path: '/dashboard', name: 'Dashboard', roles: ['admin', 'user'] },
  { path: '/admin', name: 'Admin', roles: ['admin'] },
  { path: '/profile', name: 'Profile', roles: ['user'] }
];

function filterMenuByRole(role) {
  return menuItems.filter(item => item.roles.includes(role));
}

基于权限码的精细控制

后端返回用户权限码列表，前端进行权限校验：

const PermissionWrapper = ({ requiredPermission, children }) => {
  const userPermissions = useSelector(state => state.auth.permissions);

  return userPermissions.includes(requiredPermission) 
    ? children 
    : null;
};

// 使用示例
<PermissionWrapper requiredPermission="menu:view">
  <MenuItem />
</PermissionWrapper>

动态路由与菜单结合方案

结合React Router实现权限路由：

function PrivateRoute({ permission, ...props }) {
  const hasPermission = checkPermission(permission);

  return hasPermission 
    ? <Route {...props} />
    : <Redirect to="/no-permission" />;
}

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    permission: 'admin:access'
  }
];

后端返回完整菜单结构

由后端根据用户权限返回完整的菜单树结构：

// 假设后端返回的菜单数据结构
const [menuData, setMenuData] = useState([]);

useEffect(() => {
  fetchUserMenu().then(data => setMenuData(data));
}, []);

// 渲染菜单组件
<Menu>
  {menuData.map(item => (
    <MenuItem key={item.path} {...item} />
  ))}
</Menu>

权限控制的存储方案

将权限信息存储在全局状态管理中：

// Redux slice示例
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    permissions: []
  },
  reducers: {
    setPermissions: (state, action) => {
      state.permissions = action.payload;
    }
  }
});

// 组件中使用
const permissions = useSelector(state => state.auth.permissions);