react router v6路由守卫权限控制

在React Router v6中，可以使用useLocation钩子和一个自定义的Route组件来实现路由守卫和权限控制。以下是一个简单的例子：

import { useLocation } from 'react-router-dom';
 
function PrivateRoute({ children, allowedRoles }) {
  const location = useLocation();
  const userRoles = getUserRoles(); // 假设这个函数返回当前用户的角色数组
 
  // 检查用户是否有权限访问当前路由
  const isAllowed = allowedRoles.some(role => userRoles.includes(role));
 
  return isAllowed ? children : <Navigate to="/login" replace state={{ from: location.pathname }} />;
}
 
function getUserRoles() {
  // 实现获取用户角色逻辑
  // 例如，从本地存储或者服务器获取
  return ['admin', 'user']; // 假设用户角色列表
}
 
// 使用PrivateRoute组件保护路由
function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <PrivateRoute allowedRoles={['admin']}>
        <Route path="/" element={<Dashboard />} />
        <Route path="/admin" element={<AdminPage />} />
      </PrivateRoute>
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

在这个例子中，PrivateRoute组件接收一个allowedRoles属性，该属性表示可以访问子路由的角色。PrivateRoute组件使用useLocation钩子来获取当前路由信息，并根据用户角色与允许的角色比较结果来决定是否重定向到登录页面。这种方式可以很好地控制React应用中不同路由的权限访问。