当前位置：首页 > React

react实现权限

2026-01-26 12:16:59React

React 实现权限控制的方法

在 React 应用中实现权限控制通常涉及前端路由、组件渲染和 API 请求的权限校验。以下是几种常见的实现方式：

基于角色的权限控制 (RBAC)

定义角色和权限的映射关系，根据用户角色决定可访问的路由或组件。

const roles = {
  admin: ['dashboard', 'users', 'settings'],
  user: ['dashboard']
};

function checkPermission(role, route) {
  return roles[role]?.includes(route);
}

高阶组件封装

创建高阶组件包裹需要权限控制的组件，在渲染前进行权限校验。

function withAuth(Component, requiredPermission) {
  return function AuthenticatedComponent(props) {
    const { user } = useAuth();

    if (!user.permissions.includes(requiredPermission)) {
      return <Redirect to="/unauthorized" />;
    }

    return <Component {...props} />;
  };
}

路由级权限控制

在路由配置中集成权限检查，使用自定义路由组件。

function ProtectedRoute({ permission, ...props }) {
  const { user } = useAuth();

  return user.permissions.includes(permission) 
    ? <Route {...props} />
    : <Redirect to="/login" />;
}

权限指令式渲染

在组件内部根据权限条件渲染不同内容。

function UserList() {
  const { user } = useAuth();

  return (
    <div>
      {user.canViewUsers && <UserTable />}
      {user.canCreateUsers && <AddUserButton />}
    </div>
  );
}

API 请求拦截

在发送请求前检查权限，或处理无权限的响应。

api.interceptors.request.use(config => {
  if (config.requiresAuth && !store.getState().auth.token) {
    return Promise.reject(new Error('Unauthorized'));
  }
  return config;
});

权限数据管理

使用 Context 或状态管理工具全局管理权限数据。

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [permissions, setPermissions] = useState([]);

  return (
    <AuthContext.Provider value={{ permissions }}>
      {children}
    </AuthContext.Provider>
  );
}

动态权限加载

从后端获取权限数据并动态更新前端权限配置。

useEffect(() => {
  async function loadPermissions() {
    const res = await fetch('/api/user/permissions');
    setPermissions(res.data);
  }
  loadPermissions();
}, []);