OpenAPI Codegen TS React API配置无法同步Cookie Token问题

当前代码在模块首次加载时就完成了Configuration和所有API实例的初始化，bearerToken仅在代码首次执行时读取了一次Cookie值，后续Cookie中存储的token更新后，静态初始化的配置不会自动重新读取Cookie，导致所有API请求携带的都是旧的鉴权信息。

不需要手动实现Cookie变化监听，OpenAPI Codegen生成的Configuration原生支持动态获取鉴权信息，只需要把原来静态写死的请求头/Token值改成每次请求实时读取即可。

方案1：使用原生accessToken配置项（推荐） #

Codegen生成的ConfigurationParameters中，accessToken字段支持传入函数，每次发起请求前会自动执行该函数获取最新的Token值，直接修改配置代码如下：

import {
  Configuration,
  AuthApi,
  MemeApi,
} from "../generated-sources/openapi";
import Cookies from "js-cookie";
import { UserApi } from "../generated-sources/openapi/apis/UserApi";

const configuration = new Configuration({
  credentials: "include",
  basePath: "",
  // 每次请求前实时读取最新Cookie中的token，不需要提前缓存
  accessToken: () => {
    const latestBearerToken = Cookies.get("bearer");
    return latestBearerToken ? `bearer ${latestBearerToken}` : "";
  }
});

// 以下API实例可以正常导出复用，不需要随token更新重建
export const authApi = new AuthApi(configuration);
export const memeApi = new MemeApi(configuration);
export const userApi = new UserApi(configuration);

方案2：使用请求中间件注入头（适配低版本Codegen） #

如果你使用的Codegen版本不支持accessToken传函数，可以通过内置的Middleware中间件能力，在请求发起前动态注入最新的鉴权头：

import {
  Configuration,
  AuthApi,
  MemeApi,
  Middleware,
  FetchParams,
} from "../generated-sources/openapi";
import Cookies from "js-cookie";
import { UserApi } from "../generated-sources/openapi/apis/UserApi";

// 鉴权中间件：请求发起前统一注入最新token
const authInjectMiddleware: Middleware = {
  pre: async (requestParams: FetchParams) => {
    const latestBearerToken = Cookies.get("bearer");
    if (latestBearerToken) {
      requestParams.init.headers = {
        ...(requestParams.init.headers as Record<string, string>),
        Authorization: `bearer ${latestBearerToken}`
      };
    }
    return requestParams;
  }
};

const configuration = new Configuration({
  credentials: "include",
  basePath: "",
  middleware: [authInjectMiddleware]
});

export const authApi = new AuthApi(configuration);
export const memeApi = new MemeApi(configuration);
export const userApi = new UserApi(configuration);

• 不要在React组件内部通过useEffect或者普通函数重新创建Configuration和API实例，会导致实例重复生成，引发请求重试、内存泄漏等问题。
• 不需要额外实现Cookie变化监听逻辑：js-cookie本身没有提供跨模块的变更事件，手动实现发布订阅逻辑维护成本高，上述两种动态读取的方案是Codegen原生支持的能力，没有额外的状态同步成本，稳定性更高。

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