在React中实现权限管理-CSDN博客

本文链接：https://blog.csdn.net/qq_44165941/article/details/147486603

在React中实现权限管理通常涉及以下几个关键步骤，结合路由控制、组件级权限和全局状态管理来确保用户只能访问其权限范围内的内容。以下是一个结构化的实现方案：

1. 权限数据获取与存储

用户登录后，后端返回用户角色（如admin、user）或权限列表（如['create_post', 'delete_user']）。
存储权限信息：使用全局状态管理（如Redux、Context API）或本地存储（如localStorage）保存权限数据。

// 示例：使用Redux存储权限
const initialState = {
  roles: [],
  permissions: [],
  isAuthenticated: false
};

function authReducer(state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        roles: action.payload.roles,
        permissions: action.payload.permissions,
        isAuthenticated: true
      };
    // 其他cases...
  }
}

2. 路由级权限控制

使用 React Router 实现动态路由和访问拦截，确保用户无法进入未授权页面。

方案1：高阶组件包裹路由

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

const PrivateRoute = ({ component: Component, requiredPermissions, ...rest }) => {
  const { isAuthenticated, permissions } = useSelector(state => state.auth);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated && hasPermission(permissions, requiredPermissions) ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 使用示例：需要admin权限的路由
<PrivateRoute
  path="/admin"
  component={AdminPanel}
  requiredPermissions={['admin']}
/>

方案2：动态生成路由表

根据权限过滤可访问路由：

const routes = [
  { path: '/dashboard', component: Dashboard, roles: ['user', 'admin'] },
  { path: '/admin', component: AdminPanel, roles: ['admin'] },
];

const userRoles = ['user']; // 从全局状态获取

const filteredRoutes = routes.filter(route => 
  route.roles.some(role => userRoles.includes(role))
);

3. 组件级权限控制

控制按钮、菜单等元素的显示。

高阶组件（HOC）

const withAuth = (WrappedComponent, requiredPermission) => {
  return (props) => {
    const { permissions } = useSelector(state => state.auth);
    
    if (hasPermission(permissions, requiredPermission)) {
      return <WrappedComponent {...props} />;
    } else {
      return null; // 或显示无权限提示
    }
  };
};

// 使用示例
const AdminButton = withAuth(DeleteButton, 'delete_user');

自定义Hook

const useAuth = (requiredPermission) => {
  const { permissions } = useSelector(state => state.auth);
  return permissions.includes(requiredPermission);
};

// 使用示例
const canDelete = useAuth('delete_user');
return canDelete ? <button>Delete</button> : null;

4. 工具函数

实现权限校验逻辑，支持角色或具体权限码验证。

// 检查用户是否具备所需权限
const hasPermission = (userPermissions, requiredPermissions) => {
  if (!requiredPermissions) return true;
  return requiredPermissions.some(perm => userPermissions.includes(perm));
};