当前位置：首页 > React

react实现权限控制

2026-01-26 19:57:47React

路由级权限控制

使用 react-router-dom 的 Routes 和自定义组件实现路由拦截。通过高阶组件或自定义 Route 组件包裹需鉴权的路由，检查用户权限后决定是否渲染目标组件或跳转登录页。

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = ({ allowedRoles }) => {
  const userRole = getUserRole(); // 获取用户角色
  return allowedRoles.includes(userRole) 
    ? <Outlet /> 
    : <Navigate to="/login" replace />;
};

// 使用示例
<Route element={<PrivateRoute allowedRoles={['admin']} />}>
  <Route path="/admin" element={<AdminPage />} />
</Route>

组件级权限控制

通过条件渲染或自定义封装组件控制UI元素的显隐。结合全局状态（如Redux或Context）存储用户权限信息，在组件内进行校验。

const AuthButton = ({ requiredPermission }) => {
  const { permissions } = useAuth(); // 从全局状态获取权限
  return permissions.includes(requiredPermission) 
    ? <button>敏感操作</button> 
    : null;
};

// 使用示例
<AuthButton requiredPermission="delete_user" />

API请求拦截

在axios拦截器中注入权限令牌（如JWT），并在请求前校验权限。若令牌失效或无权限，拦截请求并跳转错误页。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (!token || !validateToken(token)) {
    redirectToErrorPage();
    return Promise.reject('无权限');
  }
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

权限数据管理

采用树形结构或位运算存储权限码，提升校验效率。例如：

角色-权限映射表：通过对象关联角色与可访问的功能列表。
二进制权限码：每个权限对应一个二进制位，通过按位与运算快速校验。

const permissions = {
  admin: ['read', 'write', 'delete'],
  user: ['read']
};

// 二进制权限示例
const READ = 1 << 0; // 1
const WRITE = 1 << 1; // 2
const userPermissions = READ | WRITE; // 3
const canWrite = (userPermissions & WRITE) === WRITE; // true

动态菜单渲染

根据用户权限过滤导航菜单项，仅显示有权限访问的条目。结合后端返回的权限列表或本地配置生成动态菜单。

const menuItems = [
  { path: '/dashboard', permission: 'view_dashboard' },
  { path: '/settings', permission: 'edit_settings' }
];

const DynamicMenu = () => {
  const { permissions } = useAuth();
  return menuItems.filter(item => 
    permissions.includes(item.permission)
  ).map(item => <MenuItem path={item.path} />);
};

react实现权限控制