react实现权限控制
路由级权限控制
使用 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} />);
};
