当前位置：首页 > React

react单页如何做权限判断

2026-01-26 05:27:26React

权限判断的实现方法

在React单页应用（SPA）中实现权限判断通常涉及路由控制、组件渲染控制和API请求拦截。以下是几种常见的实现方式：

基于路由的权限控制

使用react-router-dom的Route组件结合权限验证逻辑，可以限制用户访问特定路由。例如，创建一个高阶组件（HOC）或自定义路由组件：

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

在应用中使用时：

react单页如何做权限判断

<PrivateRoute
  path="/admin"
  component={AdminPanel}
  isAuthenticated={user.role === 'admin'}
/>

基于组件的权限控制

在组件内部根据权限条件决定是否渲染内容。可以封装一个权限判断工具函数：

const checkPermission = (user, requiredRole) => {
  return user.roles.includes(requiredRole);
};

const AdminButton = ({ user }) => {
  if (!checkPermission(user, 'admin')) return null;
  return <button>Admin Action</button>;
};

全局状态管理

结合Redux或Context API管理用户权限状态，避免逐层传递权限数据：

react单页如何做权限判断

const AuthContext = createContext();

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <Routes>
        {/* ... */}
      </Routes>
    </AuthContext.Provider>
  );
};

const useAuth = () => useContext(AuthContext);

API请求拦截

在axios等HTTP客户端中添加全局请求拦截器，自动处理无权限请求：

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 403) {
      // 跳转到无权限页面
    }
    return Promise.reject(error);
  }
);

动态菜单渲染

根据权限数据动态生成导航菜单：

const menuItems = [
  { path: '/home', label: 'Home', roles: ['user', 'admin'] },
  { path: '/admin', label: 'Admin', roles: ['admin'] },
];

const Navigation = ({ user }) => {
  return (
    <nav>
      {menuItems
        .filter((item) => item.roles.includes(user.role))
        .map((item) => (
          <Link to={item.path} key={item.path}>
            {item.label}
          </Link>
        ))}
    </nav>
  );
};