feat: 登录模块完成
This commit is contained in:
许永平
244
nkebao/src/contexts/AuthContext.tsx
Normal file
244
nkebao/src/contexts/AuthContext.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { validateToken, refreshAuthToken } from '../api';
|
||||
|
||||
// 安全的localStorage访问方法
|
||||
const safeLocalStorage = {
|
||||
getItem: (key: string): string | null => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem(key);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
setItem: (key: string, value: string): void => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
},
|
||||
removeItem: (key: string): void => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
account?: string;
|
||||
avatar?: string;
|
||||
s2_accountId?: string;
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
isAuthenticated: boolean;
|
||||
token: string | null;
|
||||
user: User | null;
|
||||
login: (token: string, userData: User) => void;
|
||||
logout: () => void;
|
||||
updateToken: (newToken: string) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
// 创建默认上下文
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
isAuthenticated: false,
|
||||
token: null,
|
||||
user: null,
|
||||
login: () => {},
|
||||
logout: () => {},
|
||||
updateToken: () => {},
|
||||
isLoading: true
|
||||
});
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function AuthProvider({ children }: AuthProviderProps) {
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 检查token是否过期
|
||||
const isTokenExpired = (): boolean => {
|
||||
const tokenExpired = safeLocalStorage.getItem("token_expired");
|
||||
if (!tokenExpired) return true;
|
||||
|
||||
try {
|
||||
const expiredTime = new Date(tokenExpired).getTime();
|
||||
const currentTime = new Date().getTime();
|
||||
// 提前5分钟认为过期，给刷新留出时间
|
||||
return currentTime >= (expiredTime - 5 * 60 * 1000);
|
||||
} catch (error) {
|
||||
console.error('解析token过期时间失败:', error);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
// 验证token有效性
|
||||
const verifyToken = async (): Promise<boolean> => {
|
||||
try {
|
||||
const isValid = await validateToken();
|
||||
return isValid;
|
||||
} catch (error) {
|
||||
console.error('Token验证失败:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 尝试刷新token
|
||||
const tryRefreshToken = async (): Promise<boolean> => {
|
||||
try {
|
||||
const success = await refreshAuthToken();
|
||||
if (success) {
|
||||
const newToken = safeLocalStorage.getItem("token");
|
||||
if (newToken) {
|
||||
setToken(newToken);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('刷新token失败:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化认证状态
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
|
||||
const initAuth = async () => {
|
||||
try {
|
||||
const storedToken = safeLocalStorage.getItem("token");
|
||||
|
||||
if (storedToken) {
|
||||
// 检查token是否过期
|
||||
if (isTokenExpired()) {
|
||||
console.log('Token已过期，尝试刷新...');
|
||||
const refreshSuccess = await tryRefreshToken();
|
||||
if (!refreshSuccess) {
|
||||
console.log('Token刷新失败，需要重新登录');
|
||||
handleLogout();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 验证token有效性
|
||||
const isValid = await verifyToken();
|
||||
if (!isValid) {
|
||||
console.log('Token无效，需要重新登录');
|
||||
handleLogout();
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
const userDataStr = safeLocalStorage.getItem("userInfo");
|
||||
if (userDataStr) {
|
||||
try {
|
||||
const userData = JSON.parse(userDataStr) as User;
|
||||
setToken(storedToken);
|
||||
setUser(userData);
|
||||
setIsAuthenticated(true);
|
||||
} catch (parseError) {
|
||||
console.error('解析用户数据失败:', parseError);
|
||||
handleLogout();
|
||||
}
|
||||
} else {
|
||||
console.warn('找到token但没有用户信息，尝试保持登录状态');
|
||||
setToken(storedToken);
|
||||
setIsAuthenticated(true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("初始化认证状态时出错:", error);
|
||||
handleLogout();
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsInitialized(true);
|
||||
}
|
||||
};
|
||||
|
||||
initAuth();
|
||||
}, []);
|
||||
|
||||
// 定期检查token状态
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) return;
|
||||
|
||||
const checkTokenInterval = setInterval(async () => {
|
||||
if (isTokenExpired()) {
|
||||
console.log('检测到token即将过期，尝试刷新...');
|
||||
const refreshSuccess = await tryRefreshToken();
|
||||
if (!refreshSuccess) {
|
||||
console.log('Token刷新失败，登出用户');
|
||||
handleLogout();
|
||||
}
|
||||
}
|
||||
}, 60000); // 每分钟检查一次
|
||||
|
||||
return () => clearInterval(checkTokenInterval);
|
||||
}, [isAuthenticated]);
|
||||
|
||||
const handleLogout = () => {
|
||||
// 先清除所有认证相关的状态
|
||||
safeLocalStorage.removeItem("token");
|
||||
safeLocalStorage.removeItem("token_expired");
|
||||
safeLocalStorage.removeItem("s2_accountId");
|
||||
safeLocalStorage.removeItem("userInfo");
|
||||
safeLocalStorage.removeItem("user");
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
|
||||
// 跳转到登录页面
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const login = (newToken: string, userData: User) => {
|
||||
safeLocalStorage.setItem("token", newToken);
|
||||
safeLocalStorage.setItem("userInfo", JSON.stringify(userData));
|
||||
if (userData.s2_accountId) {
|
||||
safeLocalStorage.setItem("s2_accountId", userData.s2_accountId);
|
||||
}
|
||||
setToken(newToken);
|
||||
setUser(userData);
|
||||
setIsAuthenticated(true);
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
handleLogout();
|
||||
};
|
||||
|
||||
// 用于刷新 token 的方法
|
||||
const updateToken = (newToken: string) => {
|
||||
safeLocalStorage.setItem("token", newToken);
|
||||
setToken(newToken);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{
|
||||
isAuthenticated,
|
||||
token,
|
||||
user,
|
||||
login,
|
||||
logout,
|
||||
updateToken,
|
||||
isLoading
|
||||
}}>
|
||||
{isLoading && isInitialized ? (
|
||||
<div className="flex h-screen w-screen items-center justify-center">
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user