Как сделать перехватчик(interceptor) в axios на react?

Question

[Елена]

Вроде простая задача, а решить вообще не получается. В гугле ничего не могу найти по реакту.
Мне нужно сделать запрос axios.post для авторизации пользователя и чтоб был перехватчик(interceptor), который будет подставлять заголовок: "{ headers: { 'Authorization': `Bearer ${token}` } }", если авторизован пользователь. Я не понимаю, как это реализовать, если кто знает подскажите пожалуйста
Вот что смогла только сделать

export const authorize = (username, password) => {
  return axios.post(`${BASE_URL}/api/clients/token/`, {
    username,
    password
  })
    .then(res => {
      localStorage.setItem('jwt', res.data.access);
      return res;
    })
    .catch(err => console.log(err))
};

Answer 1

[Дима Паутов]

// ./services/api.js
import axios from 'axios';

// Проверим в самом начале, есть ли токен в хранилище
const JWTToken = localStorage.getItem('jwt');

// Создать инстанс axios
const api = axios.create({
  baseURL: `${BASE_URL}/api`;
});

function apiSetHeader (name, value) {
  if (value) {
    api.defaults.headers[name] = value;
  }
};

// Если токен есть, то добавим заголовок к запросам
if (JWTToken) {
  apiSetHeader('Authorization', `Bearer ${JWTToken}`);
}

api.interceptors.request.use(config => {
  // Если пользователь делает запрос и у него нет заголовка с токеном, то...
  if (!config.defaults.headers['Authorization']) {
    // Тут пишем редирект если не авторизован
  }

  return config;
}, error => {
  return Promise.reject(error);
});

export default api;

export apiSetHeader

// ./services/sign-in.js

import api, { apiSetHeader } from './api'

export const authorize = async (username, password) => {
  try {
    const { data } = await api.post('/clients/token/', {
      username,
      password
    });
  
    localStorage.setItem('jwt', data.access);
    apiSetHeader('Authorization', `Bearer ${data.access}`);
  } catch (error) {
    console.log(error);
  }
};

Ну, примерно так, если ничего не напутал. Писал на коленке. Могут быть синтаксические ошибки))
В целом, я показал суть, вы же, можете переписать это под себя и свои нужны.

Comments

[Елена]

Дима Турков спасибо)