perf(auth): eliminate login page flicker by moving session check to App.tsx

This commit is contained in:
2026-02-06 17:13:22 +08:00
parent 205b8925b4
commit cecedb2843
2 changed files with 16 additions and 14 deletions

View File

@@ -8,7 +8,7 @@ import GeneratePage from './pages/Generate';
import ManagePage from './pages/Manage';
import ProfilePage from './pages/Profile';
const PrivateRoute = () => {
const PrivatePrivateRoute = () => {
const user = authApi.getCurrentUser();
if (!user) {
return <Navigate to="/login" replace />;
@@ -16,6 +16,14 @@ const PrivateRoute = () => {
return <Outlet />;
};
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
const user = authApi.getCurrentUser();
if (user) {
return <Navigate to="/admin/dashboard" replace />;
}
return <>{children}</>;
};
const AdminRoutes = () => {
return (
<AdminLayout>
@@ -29,7 +37,11 @@ function App() {
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate to="/login" replace />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/login" element={
<PublicRoute>
<LoginPage />
</PublicRoute>
} />
<Route path="/query" element={<PublicQueryPage />} />
<Route element={<PrivateRoute />}>

View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { Form, Input, Button, Card, message, Checkbox } from 'antd';
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
@@ -12,16 +12,6 @@ function LoginPage() {
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
useEffect(() => {
const token = localStorage.getItem('authToken');
if (token) {
const currentUser = authApi.getCurrentUser();
if (currentUser) {
navigate('/admin/dashboard', { replace: true });
}
}
}, [navigate]);
const handleLogin = async (values: { username: string; password: string; remember?: boolean }) => {
setLoading(true);
try {