118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { ConfigProvider, Spin, App as AntdApp } from 'antd';
|
|
import zhCN from 'antd/locale/zh_CN';
|
|
import { AuthProvider, useAuth } from './hooks/useAuth';
|
|
import Layout from './components/Layout';
|
|
import Login from './pages/Login';
|
|
import Register from './pages/Register';
|
|
import Dashboard from './pages/Dashboard';
|
|
import Users from './pages/Users';
|
|
import Roles from './pages/Roles';
|
|
import Permissions from './pages/Permissions';
|
|
import Menus from './pages/Menus';
|
|
import './App.css';
|
|
|
|
// 全局message配置
|
|
import { message } from 'antd';
|
|
message.config({
|
|
top: 100,
|
|
duration: 2,
|
|
maxCount: 3,
|
|
});
|
|
|
|
// 受保护的路由组件
|
|
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { user, loading } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
minHeight: '100vh',
|
|
background: '#f0f2f5'
|
|
}}>
|
|
<Spin size="large" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
// 公共路由组件（已登录用户不能访问）
|
|
const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { user, loading } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
minHeight: '100vh',
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|
}}>
|
|
<Spin size="large" style={{ color: 'white' }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (user) {
|
|
return <Navigate to="/dashboard" replace />;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
function App() {
|
|
return (
|
|
<ConfigProvider locale={zhCN}>
|
|
<AntdApp>
|
|
<AuthProvider>
|
|
<Router>
|
|
<Routes>
|
|
{/* 公共路由 */}
|
|
<Route path="/login" element={
|
|
<PublicRoute>
|
|
<Login />
|
|
</PublicRoute>
|
|
} />
|
|
<Route path="/register" element={
|
|
<PublicRoute>
|
|
<Register />
|
|
</PublicRoute>
|
|
} />
|
|
|
|
{/* 受保护的路由 */}
|
|
<Route path="/" element={
|
|
<ProtectedRoute>
|
|
<Layout />
|
|
</ProtectedRoute>
|
|
}>
|
|
<Route index element={<Navigate to="/dashboard" replace />} />
|
|
<Route path="dashboard" element={<Dashboard />} />
|
|
<Route path="users" element={<Users />} />
|
|
<Route path="roles" element={<Roles />} />
|
|
<Route path="permissions" element={<Permissions />} />
|
|
<Route path="menus" element={<Menus />} />
|
|
</Route>
|
|
|
|
{/* 404 重定向 */}
|
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
|
</Routes>
|
|
</Router>
|
|
</AuthProvider>
|
|
</AntdApp>
|
|
</ConfigProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|