Files
ok_r/components/user-context.tsx
karlcarlo fc9cfda29e feat: 添加 API 客户端以处理 basePath 并更新所有 fetch 调用
移除 next.config.js 中的 standalone 输出配置,添加 lib/api-client.ts 封装 fetch 请求,
自动为所有 API 调用添加配置的 basePath。更新所有页面和组件中的 fetch 调用以使用新的 fetchApi 函数,
确保在部署到子路径时 API 请求能正确工作。同时调整 tsconfig.json 的格式并修复项目创建时的字段名。
2026-01-28 15:54:19 +08:00

130 lines
3.8 KiB
TypeScript

'use client';
import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
import type { User } from '@/types/database';
import { fetchApi } from '@/lib/api-client';
interface UserContextType {
currentUser: User | null;
users: User[];
isLoading: boolean;
isInitialized: boolean;
isAuthenticated: boolean;
setCurrentUserId: (id: string) => void;
logout: () => void;
refreshUsers: () => Promise<void>;
refreshMe: () => Promise<User | null>;
}
const UserContext = createContext<UserContextType | undefined>(undefined);
export function UserProvider({ children }: { children: ReactNode }) {
const [currentUser, setCurrentUser] = useState<User | null>(null);
const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isInitialized, setIsInitialized] = useState(false);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const refreshUsers = useCallback(async () => {
try {
const res = await fetchApi('/api/users');
if (res.ok) {
const data = await res.json();
setUsers(data);
return data;
}
} catch (error) {
console.error('Failed to fetch users:', error);
}
return [];
}, []);
const refreshMe = useCallback(async () => {
try {
const meRes = await fetchApi('/api/auth/me', { cache: 'no-store' });
const meData = await meRes.json().catch(() => ({}));
const me = meData?.user as User | null | undefined;
if (me && me.id) {
setCurrentUser(me);
setIsAuthenticated(true);
localStorage.setItem('okrAuthUserId', me.id);
localStorage.setItem('currentUserId', me.id);
await refreshUsers();
return me;
}
localStorage.removeItem('okrAuthUserId');
localStorage.removeItem('currentUserId');
setCurrentUser(null);
setIsAuthenticated(false);
setUsers([]);
return null;
} catch (error) {
console.error('Failed to refresh auth:', error);
localStorage.removeItem('okrAuthUserId');
localStorage.removeItem('currentUserId');
setCurrentUser(null);
setIsAuthenticated(false);
setUsers([]);
return null;
}
}, [refreshUsers]);
useEffect(() => {
async function init() {
setIsLoading(true);
try {
await refreshMe();
} catch (error) {
console.error('Failed to initialize auth:', error);
localStorage.removeItem('okrAuthUserId');
localStorage.removeItem('currentUserId');
setCurrentUser(null);
setIsAuthenticated(false);
setUsers([]);
} finally {
setIsInitialized(true);
setIsLoading(false);
}
}
init();
}, [refreshMe]);
const setCurrentUserId = useCallback((id: string) => {
const authUserId = localStorage.getItem('okrAuthUserId');
if (!authUserId) return;
if (authUserId !== id) return;
const user = users.find(u => u.id === id);
if (user) {
setCurrentUser(user);
localStorage.setItem('currentUserId', id);
setIsAuthenticated(true);
}
}, [users]);
const logout = useCallback(() => {
localStorage.removeItem('okrAuthUserId');
localStorage.removeItem('currentUserId');
setCurrentUser(null);
setIsAuthenticated(false);
setUsers([]);
fetchApi('/api/auth/logout', { method: 'POST' }).catch(() => {});
}, []);
return (
<UserContext.Provider value={{ currentUser, users, isLoading, isInitialized, isAuthenticated, setCurrentUserId, logout, refreshUsers, refreshMe }}>
{children}
</UserContext.Provider>
);
}
export function useUser() {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('useUser must be used within a UserProvider');
}
return context;
}