对所有 Axios 请求使用 Auth0 React Hook答案

【问题标题】：Using Auth0 React Hook on all Axios requests对所有 Axios 请求使用 Auth0 React Hook
【发布时间】：2020-03-01 04:09:45
【问题描述】：

我已经按照他们的快速入门教程使用 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 钩子。

【问题讨论】：

你在找这个吗：github.com/axios/axios#global-axios-defaults?

标签： reactjs axios auth0

【解决方案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/');

    // ...
  };
};

【讨论】：