使用Auth0 Token创建Axios实例时Async/Await异步解析问题

问题原因 #

getToken()是异步函数，调用后返回的是Promise对象，而非实际的token字符串。直接在模板字符串中拼接Promise对象，会被转换为字符串[object Promise]，导致Authorization头格式错误。

推荐解决方案：使用axios请求拦截器 #

这种方式既能保留axios实例的所有原生方法（如.get、.post），又能在每次请求时异步获取并注入token，是最优雅的解决方式。

import axios from 'axios'
import { Auth0Client } from "@auth0/auth0-spa-js";
import { auth0Config } from 'src/config';
import { paths } from 'src/paths';

const baseURL = 'http://localhost:3001'

const auth0 = new Auth0Client({
  domain: auth0Config.issuer_base_url!,
  clientId: auth0Config.client_id!,
  cacheLocation: 'localstorage',
  authorizationParams: {
    audience: auth0Config.audience,
    redirect_uri: auth0Config.base_url + paths.auth.auth0.callback,
  },
});

// 先创建不带Authorization头的基础实例
export const instance = axios.create({
  baseURL,
});

// 添加请求拦截器，每次请求前自动注入token
instance.interceptors.request.use(async (config) => {
  const token = await auth0.getTokenSilently();
  config.headers.Authorization = `Bearer ${token}`;
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

方案说明

• 拦截器会在每个请求发起前执行，通过await auth0.getTokenSilently()获取到实际的token值后，再添加到请求头中。
• 原有的axios实例结构完全保留，你可以正常调用.get、.post等所有方法，无需额外处理异步逻辑。

其他可选方案（不推荐）：异步初始化实例 #

如果你坚持要提前获取token再创建实例，可以采用异步初始化的方式，但需要确保实例初始化完成后再使用：

import axios from 'axios'
import { Auth0Client } from "@auth0/auth0-spa-js";
import { auth0Config } from 'src/config';
import { paths } from 'src/paths';

const baseURL = 'http://localhost:3001'

const auth0 = new Auth0Client({
  domain: auth0Config.issuer_base_url!,
  clientId: auth0Config.client_id!,
  cacheLocation: 'localstorage',
  authorizationParams: {
    audience: auth0Config.audience,
    redirect_uri: auth0Config.base_url + paths.auth.auth0.callback,
  },
});

export let instance;

// 异步初始化axios实例
async function initAxios() {
  const token = await auth0.getTokenSilently();
  instance = axios.create({
    baseURL,
    headers: {
      Authorization: `Bearer ${token}`,
    }
  });
}

// 启动时初始化
initAxios();

注意事项

这种方式需要在应用启动阶段等待initAxios()完成（比如在React的useEffect中await，或者Vue的created钩子中处理），否则直接使用instance可能会得到undefined。

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