如何在React函数组件外获取Auth0 token并配置axios请求拦截器

方案1：在顶层被Auth0Provider包裹的组件内注册拦截器（推荐） #

该方案可以保留全局axios实例的使用习惯，不需要修改原有组件的请求调用逻辑：

1. 先拆分axios实例创建和拦截器注册逻辑：

// axios.ts
import axios from "axios";
export const fetchClient = axios.create();

2. 在顶层App组件（必须放在Auth0Provider的子组件树内）中注册拦截器，此时可以正常调用useAuth0相关Hook：

// App.tsx
import { useAuth0 } from "@auth0/auth0-react";
import { fetchClient } from "./axios";
import { useEffect } from "react";

function App() {
  const { user, getAccessTokenSilently } = useAuth0();

  useEffect(() => {
    // 注册请求拦截器
    const interceptorId = fetchClient.interceptors.request.use(
      async (config) => {
        if (!user?.sub) return Promise.reject("No user");
        const token = await getAccessTokenSilently({
          audience: process.env.REACT_APP_AUTH0_API_AUDIENCE,
        });
        const userId = user.sub.split("|")[1];
        config.headers["Authorization"] = `Bearer ${token}`;
        config.headers["userId"] = userId;
        return config;
      },
      (error) => Promise.reject(error)
    );

    // 组件卸载时移除拦截器，避免重复注册
    return () => fetchClient.interceptors.request.eject(interceptorId);
  }, [user, getAccessTokenSilently]);

  // 原有App业务逻辑
  return <>{/* 应用根内容 */}</>;
}

方案2：封装自定义请求Hook #

如果不想全局注册拦截器，可以封装统一的请求Hook，只在需要发请求的组件内调用：

// useFetchClient.ts
import { useAuth0 } from "@auth0/auth0-react";
import axios from "axios";
import { useMemo, useEffect } from "react";

export const useFetchClient = () => {
  const { user, getAccessTokenSilently } = useAuth0();
  const fetchClient = useMemo(() => axios.create(), []);

  useEffect(() => {
    const interceptorId = fetchClient.interceptors.request.use(
      async (config) => {
        if (!user?.sub) return Promise.reject("No user");
        const token = await getAccessTokenSilently({
          audience: process.env.REACT_APP_AUTH0_API_AUDIENCE,
        });
        const userId = user.sub.split("|")[1];
        config.headers["Authorization"] = `Bearer ${token}`;
        config.headers["userId"] = userId;
        return config;
      },
      (error) => Promise.reject(error)
    );

    return () => fetchClient.interceptors.request.eject(interceptorId);
  }, [user, getAccessTokenSilently, fetchClient]);

  return fetchClient;
}

使用时在组件内直接调用该Hook即可，不需要重复编写token获取逻辑：

// 业务组件示例
const DemoComponent = () => {
  const fetchClient = useFetchClient();
  
  const getData = async () => {
    const res = await fetchClient.get("/你的API路径");
    // 处理返回结果
  }
}

注意事项 #

• 所有用到useAuth0的逻辑必须在Auth0Provider包裹的子组件树内运行
• 可以配合Auth0的withAuthenticationRequired高阶组件做路由鉴权，保证只有登录用户才会初始化请求逻辑，避免无用户时的报错
• getAccessTokenSilently自带token刷新能力，不需要额外处理token过期逻辑

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