File size: 2,555 Bytes
24fd742 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Chat from './components/Chat';
import { User } from './types';
function App() {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// 检查本地存储中的用户信息
const token = localStorage.getItem('token');
const userData = localStorage.getItem('user');
if (token && userData) {
try {
const parsedUser = JSON.parse(userData);
setUser(parsedUser);
} catch (error) {
console.error('解析用户数据失败:', error);
localStorage.removeItem('token');
localStorage.removeItem('user');
}
}
setLoading(false);
}, []);
const handleLogin = (userData: User, token: string) => {
setUser(userData);
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(userData));
};
const handleLogout = () => {
setUser(null);
localStorage.removeItem('token');
localStorage.removeItem('user');
};
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
</div>
);
}
return (
<Router>
<div className="min-h-screen bg-gray-50">
<Routes>
<Route
path="/login"
element={
user ? (
<Navigate to="/chat" replace />
) : (
<Login onLogin={handleLogin} />
)
}
/>
<Route
path="/register"
element={
user ? (
<Navigate to="/chat" replace />
) : (
<Register onRegister={handleLogin} />
)
}
/>
<Route
path="/chat"
element={
user ? (
<Chat user={user} onLogout={handleLogout} />
) : (
<Navigate to="/login" replace />
)
}
/>
<Route
path="/"
element={
<Navigate to={user ? "/chat" : "/login"} replace />
}
/>
</Routes>
</div>
</Router>
);
}
export default App;
|