福建省建设人才与科技发展中心网站,dw做网站怎么排版,免费咨询图片带字,wordpress漂亮手机网站模板下载整体#xff1a;
登录页单独处理#xff1a;将登录页单独处理#xff0c;路径为 /login。使用 AuthLayout 处理授权页面#xff1a;AuthLayout 可以作为一个高阶组件#xff0c;确保用户登录后才能访问系统中的其他页面。加载主布局 BasicLayout#xff1a;BasicLayout …整体
登录页单独处理将登录页单独处理路径为 /login。使用 AuthLayout 处理授权页面AuthLayout 可以作为一个高阶组件确保用户登录后才能访问系统中的其他页面。加载主布局 BasicLayoutBasicLayout 可以用来加载系统的主布局并通过 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系统主界面/h1Outlet / {/* 渲染子路由 */}/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 渲染主界面布局并通过子路由渲染实际的页面内容。
这样配置后进入系统时会先进入登录页面登录成功后才能访问其他页面未登录的用户无法访问受保护的页面。
