Использование Auth0 React Hook для всех запросов Axios - PullRequest
Новая
       18

Использование Auth0 React Hook для всех запросов Axios

1 голос
/ 04 ноября 2019

Я настроил Auth0 с React, следуя их руководству по быстрому запуску.
По сути, мое приложение React обернуто вокруг их провайдера контекста, и у меня есть доступ к хуку 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 вне поставщика контекста.

1 Ответ

1 голос
/ 04 ноября 2019

, но я не могу использовать ловушку 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/');

    // ...
  };
};
...