整体:
- 登录页单独处理:将登录页单独处理,路径为
/login
。 - 使用
AuthLayout
处理授权页面:AuthLayout
可以作为一个高阶组件,确保用户登录后才能访问系统中的其他页面。 - 加载主布局
BasicLayout
:BasicLayout
可以用来加载系统的主布局,并通过routesRender(routesConfig)
渲染配置文件中的子路由。
// AuthLayout.js
import { Navigate, Outlet } from 'react-router-dom';
const AuthLayout = () => {
const isLoggedIn = localStorage.getItem('isLoggedIn'); // 通过localStorage检查是否登录
if (!isLoggedIn) {
return <Navigate to="/login" replace />; // 未登录,重定向到登录页面
}
return (
<div>
{/* 渲染子路由 */}
<Outlet />
</div>
);
};
export default AuthLayout;
// BasicLayout.js
import React from 'react';
import { Outlet } from 'react-router-dom';
const BasicLayout = () => {
return (
<div>
{/* 这里可以放导航栏或侧边栏 */}
<h1>系统主界面</h1>
<Outlet /> {/* 渲染子路由 */}
</div>
);
};
export default BasicLayout;
下面是路由配置:
import { createBrowserRouter, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import AuthLayout from './AuthLayout';
import BasicLayout from './BasicLayout';
import routesRender from './routesRender'; // 假设这是一个用于渲染路由的函数
import routesConfig from './routesConfig'; // 路由配置
const router = createBrowserRouter([
{
path: '/login',
element: <LoginPage />, // 登录页
},
{
path: '/', // 授权布局
element: <AuthLayout />, // 检查用户是否登录
children: [
{
path: '/', // 主布局
element: <BasicLayout />,
children: routesRender(routesConfig), // 渲染路由配置
},
],
},
]);
export default router;
逻辑说明
/login
路由加载登录页面。AuthLayout
负责检查用户的登录状态,如果未登录,则重定向到/login
。BasicLayout
渲染主界面布局,并通过子路由渲染实际的页面内容。
这样配置后,进入系统时会先进入登录页面,登录成功后才能访问其他页面,未登录的用户无法访问受保护的页面。