1、用户登陆和信息: context/auth-context.tsx:
import React, { createContext, useContext, useState, useEffect } from 'react';
import { useCookies } from 'react-cookie';
import { fetchUserData } from '../api/user';
import { User } from '../types/user';
interface AuthContextType { //输出的接口类型
isLoggedIn: boolean;
user: User | undefined;
login: () => void;
logout: () => void;
}
// 1、创建context实例
const AuthContext = createContext<AuthContextType | undefined>(undefined);
// Provider包裹其他组件
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState<User | undefined>(undefined);
const [cookies] = useCookies(['__csrf']);
const getUser = () => {
fetchUserData()
.then((res) => {
console.log(res.data);
setUser(res.data.profile || undefined);
})
.catch((error) => {
console.error('Failed to fetch user data:', error);
});
};
useEffect(() => {
// 检查用户是否已登录
setIsLoggedIn(!!cookies['__csrf']);
// 如果已登录,则获取用户数据
if (!!cookies['__csrf']) {
getUser();
}
}, []);
const login = () => {
// 设置用户数据和登录状态
getUser();
setIsLoggedIn(true);
};
const logout = () => {
// 清空用户数据和登录状态
setUser(undefined);
setIsLoggedIn(false);
};
// 返回context
return (
<AuthContext.Provider value={{ isLoggedIn, user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
// 其他组件调用的函数useAuth
export const useAuth = (): AuthContextType => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
2、index.tsx: 包裹app组件
<AuthProvider>
<Provider store={store}>
<App />
</Provider>
</AuthProvider>
3、其他组件使用:
const { user } = useAuth();