当前位置：首页 > React

react实现路由授权

2026-01-27 07:59:09React

路由授权实现方法

在React中实现路由授权通常涉及验证用户权限并控制路由访问。以下是几种常见方法：

使用高阶组件（HOC）

创建高阶组件包裹需要授权的路由组件：

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

使用时传入认证状态和组件：

<PrivateRoute
  path="/dashboard"
  component={Dashboard}
  isAuthenticated={isLoggedIn}
/>

使用React Router v6的Outlet

React Router v6提供了更简洁的实现方式：

const ProtectedLayout = () => {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to="/login" />;
  }

  return <Outlet />;
};

在路由配置中：

<Route element={<ProtectedLayout />}>
  <Route path="/profile" element={<Profile />} />
</Route>

基于角色的权限控制

扩展高阶组件支持角色验证：

react实现路由授权

const RoleRoute = ({ roles, userRole, ...props }) => {
  if (!roles.includes(userRole)) {
    return <Redirect to="/unauthorized" />;
  }
  return <Route {...props} />;
};

配置路由时指定允许的角色：

<RoleRoute
  path="/admin"
  component={AdminPanel}
  roles={['admin']}
  userRole={currentUser.role}
/>

使用Context管理认证状态

创建认证上下文提供全局状态：

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

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

在组件中使用：

react实现路由授权

const { user } = useContext(AuthContext);

路由守卫组件

创建通用路由守卫组件：

const RouteGuard = ({ children }) => {
  const location = useLocation();
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
};

包裹需要保护的路由：

<Route
  path="/settings"
  element={
    <RouteGuard>
      <Settings />
    </RouteGuard>
  }
/>

动态路由配置

根据权限生成动态路由配置：

const getRoutes = (user) => {
  const commonRoutes = [
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> }
  ];

  if (user) {
    commonRoutes.push(
      { path: '/profile', element: <Profile /> },
      { path: '/dashboard', element: <Dashboard /> }
    );
  }

  return commonRoutes;
};

使用时：

const App = () => {
  const { user } = useAuth();
  const routes = getRoutes(user);

  return (
    <Routes>
      {routes.map((route) => (
        <Route key={route.path} {...route} />
      ))}
    </Routes>
  );
};

每种方法适用于不同场景，选择取决于项目复杂度和团队偏好。React Router v6推荐使用基于元素的授权模式，而高阶组件在类组件中更为常见。角色验证和动态路由适用于复杂权限系统。