u
This commit is contained in:
D8D Developer
@@ -1,158 +1,140 @@
|
||||
import React, { useState, useEffect, createContext, useContext } from 'react';
|
||||
|
||||
import {
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
} from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import type {
|
||||
User, AuthContextType
|
||||
AuthContextType
|
||||
} from '@/share/types';
|
||||
import { authClient } from '@/client/api';
|
||||
import type { InferResponseType, InferRequestType } from 'hono/client';
|
||||
|
||||
type User = InferResponseType<typeof authClient.me.$get, 200>;
|
||||
|
||||
|
||||
// 创建认证上下文
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
const AuthContext = createContext<AuthContextType<User> | null>(null);
|
||||
|
||||
// 认证提供器组件
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
|
||||
const queryClient = useQueryClient();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// 声明handleLogout函数
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// 如果已登录，调用登出API
|
||||
if (token) {
|
||||
await authClient.logout.$post();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登出请求失败:', error);
|
||||
} finally {
|
||||
// 清除本地状态
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
localStorage.removeItem('token');
|
||||
// 清除Authorization头
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
console.log('登出时已删除全局Authorization头');
|
||||
// 清除所有查询缓存
|
||||
queryClient.clear();
|
||||
// 声明handleLogout函数
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// 如果已登录，调用登出API
|
||||
if (token) {
|
||||
await authClient.logout.$post();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登出请求失败:', error);
|
||||
} finally {
|
||||
// 清除本地状态
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
localStorage.removeItem('token');
|
||||
// 清除Authorization头
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
console.log('登出时已删除全局Authorization头');
|
||||
// 清除所有查询缓存
|
||||
queryClient.clear();
|
||||
}
|
||||
};
|
||||
|
||||
// 使用useQuery检查登录状态
|
||||
const { isLoading } = useQuery({
|
||||
queryKey: ['auth', 'status', token],
|
||||
queryFn: async () => {
|
||||
if (!token) {
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
// 设置全局默认请求头
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
// 使用API验证当前用户
|
||||
const res = await authClient.me.$get();
|
||||
if (res.status !== 200) {
|
||||
const result = await res.json();
|
||||
throw new Error(result.message)
|
||||
}
|
||||
};
|
||||
const currentUser = await res.json();
|
||||
setUser(currentUser);
|
||||
setIsAuthenticated(true);
|
||||
return { isValid: true, user: currentUser };
|
||||
} catch (error) {
|
||||
return { isValid: false };
|
||||
}
|
||||
},
|
||||
enabled: !!token,
|
||||
refetchOnWindowFocus: false,
|
||||
retry: false
|
||||
});
|
||||
|
||||
// 使用useQuery检查登录状态
|
||||
const { isLoading } = useQuery({
|
||||
queryKey: ['auth', 'status', token],
|
||||
queryFn: async () => {
|
||||
if (!token) {
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
// 设置全局默认请求头
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
// 使用API验证当前用户
|
||||
const res = await authClient.me.$get();
|
||||
if(res.status !== 200){
|
||||
const result = await res.json();
|
||||
throw new Error(result.message)
|
||||
}
|
||||
const currentUser = await res.json();
|
||||
setUser(currentUser);
|
||||
setIsAuthenticated(true);
|
||||
return { isValid: true, user: currentUser };
|
||||
} catch (error) {
|
||||
// 如果API调用失败，自动登出
|
||||
// handleLogout();
|
||||
return { isValid: false };
|
||||
}
|
||||
},
|
||||
enabled: !!token,
|
||||
refetchOnWindowFocus: false,
|
||||
retry: false
|
||||
});
|
||||
|
||||
// 设置请求拦截器
|
||||
useEffect(() => {
|
||||
// 设置响应拦截器处理401错误
|
||||
const responseInterceptor = axios.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
console.log('检测到401错误，执行登出操作');
|
||||
handleLogout();
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 清理拦截器
|
||||
return () => {
|
||||
axios.interceptors.response.eject(responseInterceptor);
|
||||
};
|
||||
}, [token]);
|
||||
|
||||
const handleLogin = async (username: string, password: string, latitude?: number, longitude?: number): Promise<void> => {
|
||||
try {
|
||||
// 使用AuthAPI登录
|
||||
const response = await authClient.login.$post({
|
||||
json: {
|
||||
username,
|
||||
password
|
||||
}
|
||||
})
|
||||
if (response.status !== 200) {
|
||||
const result = await response.json()
|
||||
throw new Error(result.message);
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
// 保存token和用户信息
|
||||
const { token: newToken, user: newUser } = result;
|
||||
|
||||
// 设置全局默认请求头
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
|
||||
|
||||
// 保存状态
|
||||
setToken(newToken);
|
||||
setUser(newUser);
|
||||
setIsAuthenticated(true);
|
||||
localStorage.setItem('token', newToken);
|
||||
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error);
|
||||
throw error;
|
||||
const handleLogin = async (username: string, password: string, latitude?: number, longitude?: number): Promise<void> => {
|
||||
try {
|
||||
// 使用AuthAPI登录
|
||||
const response = await authClient.login.$post({
|
||||
json: {
|
||||
username,
|
||||
password
|
||||
}
|
||||
};
|
||||
})
|
||||
if (response.status !== 200) {
|
||||
const result = await response.json()
|
||||
throw new Error(result.message);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
user,
|
||||
token,
|
||||
login: handleLogin,
|
||||
logout: handleLogout,
|
||||
isAuthenticated,
|
||||
isLoading
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
const result = await response.json()
|
||||
|
||||
// 保存token和用户信息
|
||||
const { token: newToken, user: newUser } = result;
|
||||
|
||||
// 设置全局默认请求头
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
|
||||
|
||||
// 保存状态
|
||||
setToken(newToken);
|
||||
setUser(newUser);
|
||||
setIsAuthenticated(true);
|
||||
localStorage.setItem('token', newToken);
|
||||
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
user,
|
||||
token,
|
||||
login: handleLogin,
|
||||
logout: handleLogout,
|
||||
isAuthenticated,
|
||||
isLoading
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// 使用上下文的钩子
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth必须在AuthProvider内部使用');
|
||||
}
|
||||
return context;
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth必须在AuthProvider内部使用');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
Reference in New Issue
Block a user