Question

我已经按照他们的快速入门教程设置了React的Auth0。
基本上，我的React应用包裹在他们的Context Provider周围，并且我可以访问任何组件中的useAuth0钩子。

这是我向API发出请求的方式：

const TestComponent = () => {
  const { getTokenSilently } = useAuth0();

  const getObjectsFromAPI = async () => {
    const token = await getTokenSilently();
    const axiosConfig = {
      headers: {
        Authorization: "Bearer " + token
      }
    };

    const response = await axios.get(
      "/api/objects/",
      axiosConfig
    );

    // ... do something with the response

  };

  return ... removed code for brevity
};

是否有一种方法可以发出请求，而不必在每个请求上都写token和axiosConfig？

我知道我可以使用配置初始化新的axios实例，但是我不能使用上下文提供程序外部的useAuth0钩子。

Answer 1

但是我不能在上下文提供者外部使用useAuth0钩子。

正确，不确定如何避免每个请求生成令牌，但是可以通过将令牌传递到共享axios实例来保存axios配置部分，例如：

http.js

const instance = axios.create({
  // your config
});

export const authorized = (token) => {
   instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   return instance;
}

在您的组件中：

import http from '/path/to/above/http.js';

const TestComponent = () => {
  const { getTokenSilently } = useAuth0();

  const getObjectsFromAPI = async () => {
    const token = await getTokenSilently();

    const response = await http
       .authorized(token)
       .get('/api/objects/');

    // ...
  };
};

在所有Axios请求上使用Auth0 React Hook

1 个答案: