mini-starter/web/src/client/admin/hooks/AuthProvider.tsx

import React, { useState, createContext, useContext } from 'react';

import {
  useQuery,
  useQueryClient,
} from '@tanstack/react-query';
import axios from 'axios';
import 'dayjs/locale/zh-cn';
import type {
  AuthContextType
} from '@/share/types';
import { authClient } from '@/client/api';
import type { InferResponseType } from 'hono/client';

type User = InferResponseType<typeof authClient.me.$get, 200>;


// 创建认证上下文
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();

  // 声明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
  });

  const handleLogin = async (username: string, password: string): Promise<void> => {
    try {
      // 使用AuthAPI登录
      const response = await authClient.login.$post({
        json: {
          username,
          password
        }
      }, 
      import.meta.env.DEV ? {
        headers: {
          'X-Tenant-Id': '2'
        } 
      }: undefined )
      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;
    }
  };

  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;
};