如何使用 Axios 拦截器刷新令牌？

Question

After several attemps and reading documentation i've finalled finish to implement refresh token using axios with interceptors, all forums recommend to use reponse and request interceptor, the problem is when you the same instance of axios object (I've tried to remove the request interceptor but it doesnt work) , It will be in an infinte loop.

Answer 1

Solution: you need to create an unique instance of axios just to post to refresh route, My Code os file api.js

import axios from 'axios';
import { getToken, getRefreshToken, login } from './auth';

const api = axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    "Content-Type": "application/json",
  },
});

const apiRefresh = axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    "Content-Type": "application/json",
  },
});

api.interceptors.request.use(async config => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => {
    return response;
  },
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      await refreshToken();
      return api(originalRequest);
    }
    return Promise.reject(error);
  }
);

async function refreshToken(error) {
  return new Promise((resolve, reject) => {
    try {
      const refresh_token = getRefreshToken();
      const header = {
        Authorization: `Bearer ${refresh_token}`,
      };
      const parameters = {
        method: "POST",
        headers: header,
      };
      const body = {
        grant_type: "refresh_token",
        refresh_token,
      };
      apiRefresh
        .post(
          "/refresh",
          body,
          parameters
        )
        .then(async (res) => {
          login(res['data']['access_token'], res['data']['refresh_token'])
          return resolve(res);
        })
        .catch((err) => {
          return reject(error);
        });
    } catch (err) {
      return reject(err);
    }
  })
};




export default api;

my auth.js file:

    export const TOKEN_KEY = '@auth-Token';
    export const REFRESH_TOKEN_KEY = '@auth-Refresh-Token';
    export const getToken = () => localStorage.getItem(TOKEN_KEY);
    export const getRefreshToken = () => localStorage.getItem(REFRESH_TOKEN_KEY);
    export const login = (token, refresh_token) => {
        localStorage.setItem(TOKEN_KEY, token);
        localStorage.setItem(REFRESH_TOKEN_KEY, refresh_token);

    };
    export const logout = () => {
        localStorage.removeItem(TOKEN_KEY);
        localStorage.removeItem(REFRESH_TOKEN_KEY);
    };