当前位置：首页 > React

react路由如何做权限校验

2026-01-25 21:15:54React

路由权限校验的实现方法

在React应用中实现路由权限校验通常需要结合路由库（如React Router）和状态管理工具（如Redux或Context API）。以下是几种常见的实现方式：

使用高阶组件（HOC）包装路由

创建高阶组件来检查用户权限，决定是否渲染目标组件或重定向到登录页：

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

使用方式：

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

在路由配置中集中管理权限

定义路由配置数组，包含权限要求：

const routes = [
  { path: '/', component: HomePage, public: true },
  { path: '/admin', component: AdminPage, roles: ['admin'] },
  { path: '/profile', component: ProfilePage, authRequired: true }
];

渲染时根据配置检查权限：

{routes.map((route) => {
  if (route.public) return <Route {...route} />;
  if (route.authRequired && !isLoggedIn) return <Redirect to="/login" />;
  if (route.roles && !hasRequiredRole(route.roles)) return <Redirect to="/403" />;
  return <Route {...route} />;
})}

使用React Router v6的loader功能

v6版本引入了loader机制，可以在路由加载前执行权限检查：

const router = createBrowserRouter([
  {
    path: '/protected',
    element: <ProtectedPage />,
    loader: async () => {
      if (!await checkAuth()) {
        throw redirect('/login');
      }
      return null;
    }
  }
]);

结合Context API管理权限状态

创建全局AuthContext存储用户权限：

const AuthContext = createContext();

function useAuth() {
  return useContext(AuthContext);
}

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

  return (
    <AuthContext.Provider value={{ user }}>
      <Routes>
        <Route path="/admin" element={
          <RequireAuth roles={['admin']}>
            <AdminPage />
          </RequireAuth>
        }/>
      </Routes>
    </AuthContext.Provider>
  );
}

动态菜单渲染

根据权限过滤可访问的路由，生成导航菜单：

function NavMenu() {
  const { user } = useAuth();

  const filteredRoutes = allRoutes.filter(route => 
    !route.requiredRole || 
    user?.roles.includes(route.requiredRole)
  );

  return (
    <nav>
      {filteredRoutes.map(route => (
        <Link to={route.path}>{route.label}</Link>
      ))}
    </nav>
  );
}

错误边界处理

为无权限访问提供友好提示：

function RequireAuth({ children, roles }) {
  const { user } = useAuth();

  if (!user) return <Navigate to="/login" />;
  if (roles && !roles.some(r => user.roles.includes(r))) {
    return <UnauthorizedPage />;
  }

  return children;
}

服务端校验补充

尽管前端做了校验，服务端仍需对每个请求进行权限验证：

react路由如何做权限校验

// Express中间件示例
function checkRole(requiredRole) {
  return (req, res, next) => {
    if (!req.user.roles.includes(requiredRole)) {
      return res.status(403).send('Forbidden');
    }
    next();
  };
}

实现路由权限校验时，建议将权限逻辑集中管理，避免分散在各个组件中。根据应用复杂度选择合适的方案，简单应用可以使用HOC方式，复杂系统建议采用路由配置集中管理。