时间戳

首页 > 解决方案 > 对所有 Axios 请求使用 Auth0 React Hook

reactjs - 对所有 Axios 请求使用 Auth0 React Hook

问题描述

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

有没有一种方法可以在不必在每个请求上写tokenand的情况下axiosConfig提出请求？

我知道我可以使用配置初始化一个新的 axios 实例，但是我不能useAuth0在 Context Provider 之外使用钩子。

标签： reactjsaxiosauth0

解决方案

但我不能在上下文提供程序之外使用 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/');

    // ...
  };
};

推荐阅读