react实现路由鉴权
路由鉴权实现方案
React中实现路由鉴权通常结合react-router-dom库，通过高阶组件或自定义路由组件控制权限。以下是几种常见方法：
使用高阶组件封装
创建高阶组件包裹需要鉴权的路由组件，检查用户权限后决定是否渲染：
import { Navigate } from 'react-router-dom';
const withAuth = (Component, requiredRole) => {
return (props) => {
const userRole = localStorage.getItem('userRole');
if (userRole !== requiredRole) {
return <Navigate to="/login" replace />;
}
return <Component {...props} />;
};
};
// 使用示例
const AdminPage = withAuth(AdminComponent, 'admin');自定义路由组件
创建ProtectedRoute组件替代原生Route，集成权限检查逻辑：
function ProtectedRoute({ roles, children }) {
const currentUser = useAuth(); // 自定义hook获取用户信息
if (!currentUser || !roles.includes(currentUser.role)) {
return <Navigate to="/unauthorized" />;
}
return children;
}
// 路由配置中使用
<Routes>
<Route path="/admin" element={
<ProtectedRoute roles={['admin']}>
<AdminDashboard />
</ProtectedRoute>
}/>
</Routes>全局路由拦截
在根路由组件中进行统一鉴权处理，适用于简单场景：
function RouterWrapper() {
const location = useLocation();
const isAuthenticated = checkAuth(); // 认证状态检查
if (location.pathname.startsWith('/admin') && !isAuthenticated) {
return <Navigate to="/login" state={{ from: location }} />;
}
return <Outlet />;
}动态路由加载
结合懒加载实现按权限动态生成路由表：
function generateRoutes(userRole) {
const commonRoutes = [
{ path: '/', element: <HomePage /> }
];
const adminRoutes = userRole === 'admin'
? [{ path: '/admin', element: <AdminPage /> }]
: [];
return [...commonRoutes, ...adminRoutes];
}
function App() {
const routes = generateRoutes(currentUser.role);
return <Routes>{routes.map(route => <Route {...route} />)}</Routes>;
}权限存储方案
- JWT验证：从token解析用户角色
- Redux/Context：全局状态管理权限信息
- 服务端验证：通过API实时校验权限
// JWT解码示例
function checkToken() {
const token = localStorage.getItem('token');
const decoded = jwt.decode(token);
return decoded?.role || 'guest';
}错误处理
添加统一的未授权处理页面，并保留跳转来源：
<Route path="/unauthorized" element={
<div>
无权限访问
<button onClick={() => navigate(-1)}>返回</button>
</div>
} />以上方案可根据项目复杂度组合使用，建议中型以上项目采用高阶组件+动态路由方案，小型项目可采用全局拦截方案。
