如何实现React Router v6权限路由与重定向

React Router v6是目前React生态中最主流的路由管理库，它的路由配置方式和导航API相比v5版本有较大的调整，实现权限路由和重定向的逻辑也需要适配新的特性。权限路由的核心目标是根据用户的登录状态、角色权限等信息，控制用户能否访问特定路由，无权限时自动跳转到登录页或提示页。

核心实现思路

实现React Router v6的权限路由主要分为三个步骤：首先封装一个权限校验的高阶组件或者自定义组件，其次在路由配置中引入该组件包裹需要权限的路由，最后在权限校验逻辑中处理重定向逻辑。React Router v6提供了Navigate组件用于重定向，useNavigate钩子用于编程式导航，这两个API是实现重定向的核心。

封装权限校验组件

我们可以封装一个AuthRoute组件，该组件接收需要渲染的子组件，内部判断用户是否有权限，有权限则渲染子组件，无权限则重定向到指定页面。以下是一个基础的权限校验组件实现：

import { Navigate } from 'react-router-dom';

// 模拟获取用户权限的方法，实际项目中可以从状态管理库或者本地存储中获取
const getUserAuth = () => {
  // 这里返回true表示已登录有权限，实际根据项目逻辑调整
  const token = localStorage.getItem('user_token');
  return !!token;
};

const AuthRoute = ({ children }) => {
  const isAuth = getUserAuth();
  if (isAuth) {
    // 有权限，渲染子组件
    return children;
  }
  // 无权限，重定向到登录页
  return <Navigate to="/login" replace />;
};

export default AuthRoute;

路由配置中使用权限组件

在React Router v6的路由配置中，我们可以使用AuthRoute包裹需要权限的路由组件。React Router v6推荐使用createBrowserRouter或者useRoutes来配置路由，以下是基于createBrowserRouter的配置示例：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AuthRoute from './components/AuthRoute';
import Home from './pages/Home';
import Login from './pages/Login';
import Admin from './pages/Admin';
import NotFound from './pages/NotFound';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/admin',
    // 使用AuthRoute包裹Admin组件，只有有权限的用户才能访问
    element: (
      <AuthRoute>
        <Admin />
      </AuthRoute>
    ),
  },
  {
    path: '*',
    element: <NotFound />,
  },
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

带角色权限的路由实现

如果项目需要更细粒度的角色权限控制，比如只有管理员角色才能访问/admin路由，普通用户不能访问，我们可以扩展AuthRoute组件，增加角色校验逻辑：

import { Navigate } from 'react-router-dom';

// 模拟获取用户角色，实际从项目状态中获取
const getUserRole = () => {
  return localStorage.getItem('user_role') || 'guest';
};

// 接收允许的访问角色列表
const AuthRoute = ({ children, allowRoles = [] }) => {
  const userRole = getUserRole();
  const isAuth = !!localStorage.getItem('user_token');
  
  // 未登录，重定向到登录页
  if (!isAuth) {
    return <Navigate to="/login" replace />;
  }
  
  // 登录了但角色不在允许列表中，重定向到无权限提示页
  if (allowRoles.length > 0 && !allowRoles.includes(userRole)) {
    return <Navigate to="/no-permission" replace />;
  }
  
  return children;
};

export default AuthRoute;

对应的路由配置可以调整为：

{
  path: '/admin',
  element: (
    <AuthRoute allowRoles={['admin']}>
      <Admin />
    </AuthRoute>
  ),
},

登录后重定向回原页面

很多场景下，用户访问需要权限的页面时未登录，跳转到登录页登录成功后，需要重定向回之前访问的页面。我们可以通过在重定向到登录页时携带当前路径的参数来实现，修改AuthRoute组件：

import { Navigate, useLocation } from 'react-router-dom';

const AuthRoute = ({ children }) => {
  const location = useLocation();
  const isAuth = !!localStorage.getItem('user_token');
  
  if (isAuth) {
    return children;
  }
  
  // 重定向到登录页，同时携带当前路径作为state，登录成功后可以使用
  return <Navigate to="/login" state={{ from: location.pathname }} replace />;
};

export default AuthRoute;

在登录页的登录逻辑中，登录成功后可以从路由的state中获取之前访问的路径，再进行重定向：

import { useNavigate, useLocation } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const handleLogin = () => {
    // 模拟登录逻辑
    localStorage.setItem('user_token', 'test_token');
    // 获取之前访问的路径，默认跳转到首页
    const from = location.state?.from || '/';
    navigate(from, { replace: true });
  };
  
  return (
    <div>
      <h2>登录页</h2>
      <button onClick={handleLogin}>点击登录</button>
    </div>
  );
};

export default Login;

注意事项

• React Router v6中Navigate组件的replace属性为true时，重定向不会留下历史记录，避免用户点击返回键又回到无权限的页面。
• 权限校验的逻辑尽量统一封装，不要分散在各个页面中，方便后续维护和扩展。
• 本地存储的token和角色信息需要做安全处理，避免被篡改，实际项目中可以结合后端接口做二次校验。

React_Router_v6权限路由重定向前端路由路由守卫修改时间：2026-07-21 05:21:24