JWT for front-end with exios

htt-core.js

import axios from 'axios';
import { getData, setData, removeData } from '@services/local-storage';

export const config = {
  baseURL: process.env.BACKEND_URL,
};

class ErrorApi {
  constructor(e, params) {
    if (params) {
      this.params = params;
    }
    if (e && e.response) {
      this.status = e.response.status;
      if (e.response.request && e.response.request.responseURL) {
        this.URL = e.response.request.responseURL;
      }
    }

    this.data = (e && e.response && e.response.data) || e;
  }
}

class Api {
  constructor() {
    this.refreshRequest = null;
    this.client = axios.create();
    this.client.interceptors.response.use(
      (result) => result,
      async (error) => {
        if (error.config.isRefreshRequest && (error.response.status === 401)) {
          removeData('access-token');
          removeData('refresh-token');
          removeData('user');
          window.location.href = '/';
        }

        if (!getData('refresh-token') || error.response.status !== 401 || error.response.retry) {
          throw new ErrorApi(error);
        }

        if (!this.refreshRequest) {
          this.refreshRequest = this.client.post(
            '/auth/refresh/',
            { refresh: getData('refresh-token') },
            { baseURL: config.baseURL, isRefreshRequest: true },
          );
        }

        const resultRefresh = await this.refreshRequest;
        const { data: { access, refresh } } = resultRefresh;
        setData('access-token', access);
        setData('refresh-token', refresh);
        config.headers = { ...config.headers, Authorization: `JWT ${access}` };
        this.refreshRequest = null;
        return this.client({
          ...error.config,
          headers: { ...error.config.headers, Authorization: `JWT ${access}` },
          retry: true,
        });
      },
    );
  }

  post = async (url, params, currentConfig) => {
    const result = await this.client.post(url, params, currentConfig || config);
    return result.data;
  };

  patch = async (url, params, currentConfig) => {
    const result = await this.client.patch(url, params, currentConfig || config);
    return result.data;
  };

  get = async (url, params = {}, currentConfig) => {
    const realConfig = currentConfig || config;
    const result = await this.client.get(url, { params: { ...params }, ...realConfig });
    return result.data;
  };

  put = async (url, params = {}, currentConfig) => {
    const result = await this.client.put(url, params, currentConfig || config);
    return result.data;
  };

  del = async (url) => {
    const result = await this.client.delete(url, config);
    return result.data;
  }
}

const api = new Api();

export const {
  post,
  patch,
  get,
  put,
  del,
} = api;