对所有 Axios 请求使用 Auth0 React Hook

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在 Context Provider 之外使用钩子。

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/');

    // ...
  };
};