Trong bài viết này, mình sẽ hướng dẫn các bạn sử dụng Axios Interceptors để tự động làm mới access token từ refresh token trong jwt.

1. Axios Interceptors.

Axios Interceptors như một bác bảo vệ, chặn các request và response, cho phép bạn xử lý lỗi, config request headers như gắn token vào request, xử lý params,...

2. Setup axios client, dùng axios interceptors để refresh token.

Trước tiên, bạn cần cài đặt axios, jwt-decode (để decode jwt token của bạn) với câu lệnh sau: yarn add axios jwt-decode

import axios from 'axios'
import jwt_decode from 'jwt-decode'

const axiosClient = axios.create({
    baseURL: 'api url của bạn'
    headers: {
    'Content-Type': 'application/json',
    },
    withCredentials: true, // Để request gửi kèm cookie
})

axiosClient.interceptors.request.use(async (config) => {
  let accessToken = localStorage.getItem('accessToken') 

  if(accessToken) {
    const decodedToken = jwt_decode(token)
    if(decodedToken.exp * 1000 < new Date().getTime()) {
      accessToken  = await refreshToken()
      localStorage.setItem('accessToken', accessToken )
      
    }
    config.headers.Authorization = 'Bearer ' + accessToken 
  }
  
  return config
}

Tạm kết

Trên đây là cách sử dụng Axios Interceptors để làm mới jwt token, khá đơn giản đúng không nào ? Mong bài viết này sẽ hữu ích với bạn. Cảm ơn bạn đã đọc bài viết <3.