perf(auth): eliminate login page flicker by moving session check to App.tsx
This commit is contained in:
18
src/App.tsx
18
src/App.tsx
@@ -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 />}>
|
||||
@@ -46,4 +58,4 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user