axios请求拦截中，动态给header赋值传参

axios请求拦截中，动态给header赋值传参

在项目中，我遇到一个问题，所有接口需要加一个传参，tenant-id，该值是从接口获取。 我的做法是： ① 在路由守卫中判断有无该值，没有则请求接口获取，并放到session storage中。 ② 在axios封装的js中，从session中获取tenant-id，并传给header，以下为简略代码

import { storageLocal } from "@pureadmin/utils";

const tenantId =
  storageLocal().getItem<DataInfo<number>>("user-info")?.tenantId;

const defaultConfig: AxiosRequestConfig = {
  baseURL: VITE_BASE_URL,
  // 请求超时时间
  timeout: 10 * 1000,
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest",
    "tenant-id": tenantId
  },
  // 数组格式参数序列化（https://github.com/axios/axios/issues/5142）
  paramsSerializer: {
    serialize: stringify as unknown as CustomParamsSerializer
  }
};

有测试反馈，隐身模式，第一次传参总不在。

经排查，axios为了节约开销，只实例化一次，实例化时获取到的参数作为静态属性存储起来，后续不会变化。而实例化时，还没从接口请求到tenant-id。请求到的tenant-id又存在session中，故而会存在，隐身者模式第一次访问，tenant-id传参不存在。

知道问题后，解决方法就比较直观了。 tanant-id改为在请求拦截中动态获取，并传递。

 /** 请求拦截 */
  private httpInterceptorsRequest(): void {
    PureHttp.axiosInstance.interceptors.request.use(
      async (config: PureHttpRequestConfig) => {
      
        config.headers["tenant-id"] =
          storageLocal().getItem<DataInfo<number>>("user-info")?.tenantId; 
          // 其他代码省略
          
      },
      error => {
        return Promise.reject(error);
      }
    );
    }