Cara Refresh Token Di Axios Interceptors

Axios adalah salah satu library yang populer dan digunakan untuk melakukan HTTP Request.

biasanya beberapa framework javascript seperti Vue atau React seringkali menggunakannya.

Nah, kali ini ada sebuah kasus yang sebenarnya umum, dan cukup sepele, namun seringkali terlupkan, sehingga dikemudian hari hal ini akan menimbulkan bugs yang merepotkan.

Ketika sebuah access_token telah habis masa berlakunya, biasanya akan menimbulkan error response diaxios request 401, 403 atau error berjenis 4xx.

Nah kalo sudah seperti ini, bisa kita coba cara dibawah ini untuk membetulkannya.

import axios from "axios";
import authService from "@/service/auth";

// ambil token yang kita simpan di `localStorage`
let ACCESS_TOKEN = localStorage.getItem("access_token");

// kita set token di setiap header axios request
axios.defaults.headers.common = {
  Authorization: `Bearer ${ACCESS_TOKEN}`
};

axios.interceptors.response.use(
  async (response) => {    
    return response;
  },
  async (error) => {

    // ambil konfigurasi dari request sebelumnya
    const originalRequest = error.config;

    if (error.response.status === 401 && !originalRequest._retry) {

      // dapatkan token baru
      const tokenData = await authService.getToken();
      // set token baru di header
      originalRequest.headers["Authorization"] = `Bearer ${tokenData.access_token}`;
      originalRequest._retry = true;
      // ulangi request dengan konfigurasi dari request sebelumnya
      return axios(originalRequest);
    }
    return Promise.reject(error);
  }
);

export default axios;

Nah jadi kode diatas pada intinya adalah, apa bila terdeteksi error 401 dari API request yang telah dilakukan, maka saat itu juga kita akan meminta token baru, dan kemudian mengulangi request sebelumnya yang gagal dengan token baru.

Nah kode diatas adalah contoh aplikasi yang saya gunakan di kode VueJs saya, dan kamu juga bisa implementasikan di kode mu.

Selamat mencoba.