Spaces:
Sleeping
Sleeping
File size: 2,521 Bytes
e85fa50 |
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 |
import React, { createContext, useContext, useState, useEffect } from 'react';
import { authAPI } from '../services/api';
interface AuthContextType {
isAuthenticated: boolean;
user: string | null;
login: (username: string, password: string) => Promise<void>;
logout: () => void;
loading: boolean;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
const [user, setUser] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true);
// 检查是否已登录
useEffect(() => {
const checkAuth = async () => {
const token = localStorage.getItem('authToken');
const savedUser = localStorage.getItem('user');
if (token && savedUser) {
try {
// 验证令牌是否有效
await authAPI.getProfile();
setIsAuthenticated(true);
setUser(savedUser);
} catch (error) {
// 令牌无效,清除登录状态
localStorage.removeItem('authToken');
localStorage.removeItem('user');
setIsAuthenticated(false);
setUser(null);
}
}
setLoading(false);
};
checkAuth();
}, []);
// 登录方法
const login = async (username: string, password: string) => {
setLoading(true);
try {
const response = await authAPI.login(username, password);
const { token, username: user } = response;
// 保存令牌和用户信息到本地存储
localStorage.setItem('authToken', token);
localStorage.setItem('user', user);
setIsAuthenticated(true);
setUser(user);
} catch (error) {
// 登录失败
console.error('Login failed:', error);
throw error;
} finally {
setLoading(false);
}
};
// 登出方法
const logout = () => {
authAPI.logout();
setIsAuthenticated(false);
setUser(null);
};
return (
<AuthContext.Provider value={{ isAuthenticated, user, login, logout, loading }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}; |