当前位置：首页 > React

react如何实现权限控制

2026-01-24 20:15:44React

实现权限控制的方法

在React中实现权限控制通常涉及前端路由控制、组件级权限和API请求拦截。以下是几种常见方法：

路由级权限控制

通过高阶组件或自定义钩子封装路由，根据用户权限动态渲染可访问的路由：

const PrivateRoute = ({ component: Component, roles, ...rest }) => {
  const user = useSelector(state => state.auth.user);
  return (
    <Route {...rest} render={props => 
      roles.includes(user.role) 
        ? <Component {...props} />
        : <Redirect to="/forbidden" />
    }/>
  );
};

// 使用示例
<PrivateRoute path="/admin" component={AdminPage} roles={['admin']} />

组件级权限控制

使用条件渲染或自定义指令式组件控制UI元素的显示：

const WithPermission = ({ allowedRoles, children }) => {
  const { role } = useAuth();
  return allowedRoles.includes(role) ? children : null;
};

// 使用示例
<WithPermission allowedRoles={['editor']}>
  <EditButton />
</WithPermission>

全局权限管理

结合Context API或状态管理工具（如Redux）集中管理权限：

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState({ role: 'guest' });

  const hasPermission = (requiredRole) => 
    user.role === requiredRole;

  return (
    <AuthContext.Provider value={{ user, hasPermission }}>
      {children}
    </AuthContext.Provider>
  );
};

// 使用示例
const { hasPermission } = useContext(AuthContext);
{hasPermission('admin') && <AdminPanel />}

API请求拦截

在axios等HTTP客户端中添加权限校验：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      window.location = '/login';
    }
    return Promise.reject(error);
  }
);

动态菜单渲染

根据权限数据生成可访问的导航菜单：

const menuItems = [
  { path: '/dashboard', roles: ['user', 'admin'] },
  { path: '/settings', roles: ['admin'] }
];

const NavMenu = () => {
  const { role } = useAuth();
  return (
    <ul>
      {menuItems.filter(item => item.roles.includes(role))
       .map(item => <li key={item.path}>{item.path}</li>)}
    </ul>
  );
};