feat: 添加路由保护
This commit is contained in:
66
src/App.js
66
src/App.js
@@ -47,6 +47,7 @@ import { NotificationProvider, useNotification } from "contexts/NotificationCont
|
||||
|
||||
// Components
|
||||
import ProtectedRoute from "components/ProtectedRoute";
|
||||
import ProtectedRouteRedirect from "components/ProtectedRouteRedirect";
|
||||
import ErrorBoundary from "components/ErrorBoundary";
|
||||
import AuthModalManager from "components/Auth/AuthModalManager";
|
||||
import NotificationContainer from "components/NotificationContainer";
|
||||
@@ -183,15 +184,66 @@ function AppContent() {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 事件详情独立页面路由 (不经 Admin 布局) */}
|
||||
<Route path="event-detail/:eventId" element={<EventDetail />} />
|
||||
{/* 事件详情独立页面路由 - 需要登录(跳转模式) */}
|
||||
<Route
|
||||
path="event-detail/:eventId"
|
||||
element={
|
||||
<ProtectedRouteRedirect>
|
||||
<EventDetail />
|
||||
</ProtectedRouteRedirect>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 公司相关页面 */}
|
||||
<Route path="forecast-report" element={<ForecastReport />} />
|
||||
<Route path="Financial" element={<FinancialPanorama />} />
|
||||
<Route path="company" element={<CompanyIndex />} />
|
||||
<Route path="company/:code" element={<CompanyIndex />} />
|
||||
<Route path="market-data" element={<MarketDataView />} />
|
||||
{/* 财报预测 - 需要登录(跳转模式) */}
|
||||
<Route
|
||||
path="forecast-report"
|
||||
element={
|
||||
<ProtectedRouteRedirect>
|
||||
<ForecastReport />
|
||||
</ProtectedRouteRedirect>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 财务全景 - 需要登录(弹窗模式) */}
|
||||
<Route
|
||||
path="Financial"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<FinancialPanorama />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 公司页面 - 需要登录(弹窗模式) */}
|
||||
<Route
|
||||
path="company"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<CompanyIndex />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 公司详情 - 需要登录(跳转模式) */}
|
||||
<Route
|
||||
path="company/:code"
|
||||
element={
|
||||
<ProtectedRouteRedirect>
|
||||
<CompanyIndex />
|
||||
</ProtectedRouteRedirect>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 市场数据 - 需要登录(弹窗模式) */}
|
||||
<Route
|
||||
path="market-data"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<MarketDataView />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
{/* 认证页面路由 - 不使用 MainLayout */}
|
||||
|
||||
38
src/components/ProtectedRouteRedirect.js
Normal file
38
src/components/ProtectedRouteRedirect.js
Normal file
@@ -0,0 +1,38 @@
|
||||
// src/components/ProtectedRouteRedirect.js - 跳转版本
|
||||
// 未登录时跳转到首页,用于三级页面(详情页)
|
||||
import React from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
const ProtectedRouteRedirect = ({ children }) => {
|
||||
const { isAuthenticated, isLoading, user } = useAuth();
|
||||
|
||||
// 显示加载状态
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box
|
||||
height="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text fontSize="lg" color="gray.600">正在验证登录状态...</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 未登录,直接跳转到首页
|
||||
if (!isAuthenticated || !user) {
|
||||
return <Navigate to="/home" replace />;
|
||||
}
|
||||
|
||||
// 已登录,正常渲染子组件
|
||||
return children;
|
||||
};
|
||||
|
||||
export default ProtectedRouteRedirect;
|
||||
Reference in New Issue
Block a user