如何从外部 React 组件获取 Auth0 令牌？

我正在使用 axios 向我的 API 发出请求。目前，我使用 axios 拦截器为发送的每个请求设置令牌（因此我不必重复从组件内获取令牌）。有什么办法可以做到这一点吗？我的第一次尝试看起来像这样：

// axios.ts
import { useAuth0 } from "@auth0/auth0-react";
import axios from "axios";

const fetchClient = axios.create();

fetchClient.interceptors.request.use(
  async (config) => {
    const { user, getAccessTokenSilently } = useAuth0();

    if (!user || !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);
  }
);

export default fetchClient;

但当然你不能调用Hooks，因此也不能调用getAccessTokenSilently来自非功能组件。有办法解决这个问题吗？谢谢大家

我通过传递解决了这个问题getAccessTokenSilently作为我的 axios 文件中函数的参数。

import axios from "axios";

const httpClient = axios.create();

// adds access tokens in all api requests
// this interceptor is only added when the auth0 instance is ready and exports the getAccessTokenSilently method
export const addAccessTokenInterceptor = (getAccessTokenSilently) => {
  httpClient.interceptors.request.use(async (config) => {
    const token = await getAccessTokenSilently();
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  });
};

export default httpClient;

然后在我的 App.jsx 中，一旦 Auth0 实例准备就绪，我就使用 useEffect 来执行此函数：

import { useEffect } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { addAccessTokenInterceptor } from "./api/httpClient";

const App = () => {

  const { getAccessTokenSilently } = useAuth0();

  useEffect(() => {
    addAccessTokenInterceptor(getAccessTokenSilently);
  }, [getAccessTokenSilently]);

   return (
    <div>
      Your app here...
    </div>
  );
}

export default App;

希望这可以帮助！