perf(auth): eliminate login page flicker by moving session check to App.tsx
This commit is contained in:
16
src/App.tsx
16
src/App.tsx
@@ -8,7 +8,7 @@ import GeneratePage from './pages/Generate';
|
|||||||
import ManagePage from './pages/Manage';
|
import ManagePage from './pages/Manage';
|
||||||
import ProfilePage from './pages/Profile';
|
import ProfilePage from './pages/Profile';
|
||||||
|
|
||||||
const PrivateRoute = () => {
|
const PrivatePrivateRoute = () => {
|
||||||
const user = authApi.getCurrentUser();
|
const user = authApi.getCurrentUser();
|
||||||
if (!user) {
|
if (!user) {
|
||||||
return <Navigate to="/login" replace />;
|
return <Navigate to="/login" replace />;
|
||||||
@@ -16,6 +16,14 @@ const PrivateRoute = () => {
|
|||||||
return <Outlet />;
|
return <Outlet />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
const user = authApi.getCurrentUser();
|
||||||
|
if (user) {
|
||||||
|
return <Navigate to="/admin/dashboard" replace />;
|
||||||
|
}
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
const AdminRoutes = () => {
|
const AdminRoutes = () => {
|
||||||
return (
|
return (
|
||||||
<AdminLayout>
|
<AdminLayout>
|
||||||
@@ -29,7 +37,11 @@ function App() {
|
|||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Navigate to="/login" replace />} />
|
<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 path="/query" element={<PublicQueryPage />} />
|
||||||
|
|
||||||
<Route element={<PrivateRoute />}>
|
<Route element={<PrivateRoute />}>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState } from 'react';
|
||||||
import { Form, Input, Button, Card, message, Checkbox } from 'antd';
|
import { Form, Input, Button, Card, message, Checkbox } from 'antd';
|
||||||
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
|
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
@@ -12,16 +12,6 @@ function LoginPage() {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const navigate = useNavigate();
|
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 }) => {
|
const handleLogin = async (values: { username: string; password: string; remember?: boolean }) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user