如何让API client访问Auth Provider状态，实现401时自动清空用户状态

改造方案如下： #

1. 把API Client集成到Auth Context内部初始化

修改你的AuthProvider代码，在context内部创建client实例，就可以直接访问setUser方法更新鉴权状态：

import { createContext, useContext, useState, useMemo } from 'react';
import { JsonServiceClient } from '你的client依赖路径';
import environment from '你的环境变量配置路径';

const AuthContext = createContext();

export function AuthProvider(props) {
  const [user, setUser] = useState();
  const [loading, setLoading] = useState(true);

  // 用useMemo保证client只初始化一次，保持单例特性
  const client = useMemo(() => {
    const _client = new JsonServiceClient(environment.apiUrl);
    _client.onAuthenticationRequired = () => {
      // 直接清空用户状态，触发原有登出逻辑
      setUser(null);
      return Promise.resolve(true);
    };
    return _client;
  }, []);

  // 将client和原有鉴权状态/方法一起暴露给下游
  const contextValue = {
    user,
    loading,
    setUser,
    client,
    // 你原有实现的login、logout等方法保留在这里
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
}

// 原有useAuth hook不用改结构，直接返回context值即可
export function useAuth() {
  return useContext(AuthContext);
}

2. 替换全局client的引用方式

删除原来全局声明的client代码，所有需要发起API请求的地方，都通过useAuth hook获取client实例：

// 组件内使用示例
import { useAuth } from './AuthProvider的路径';

function DemoComponent() {
  const { client } = useAuth();
  
  const fetchData = async () => {
    // 原有请求逻辑完全不用修改
    const result = await client.get('/your/api/path');
  };
}

如果有非组件的工具函数需要调用client，将client作为参数传入即可，避免脱离context上下文调用。

方案优势 #

• 完全适配现有鉴权逻辑，401响应触发后自动清空用户，直接跳转未认证页面，无需额外路由处理
• 改造量小，原有请求逻辑不用修改，仅替换client的获取方式
• client仍为单例，不会重复初始化，不影响性能

内容的提问来源于stack exchange，提问作者Guerrilla