Updating the id token in VueJs using Axios interceptor when it expires

Question

Updating the id token in VueJs using Axios interceptor when it expires

I need to implement an axios interceptor that will add the idToken as an authorization header to every axios call, and also refresh the idToken if it has expired before making any call.

My current code for this task is as follows:

axios.interceptors.request.use(function(config) {
  var idToken = getIdToken()
  var refreshToken = {
    "refreshToken" : getRefreshToken()
  }

   if(isTokenExpired(idToken)){
     console.log("==============Reloading")
     refresh(refreshToken).then(response=>{
       setIdToken(response.idToken)
       setAccessToken(response.accessToken)
     })
     idToken = getIdToken()
     config.headers.Authorization = `${idToken}`;
   }
   else{
    config.headers.Authorization = `${idToken}`;
   }
 return config;
 }, function(err) {
  return Promise.reject(err);
});

This implementation works well when the idToken is valid. However, when the idToken expires, it causes an infinite loop leading to page hang. The refresh() function, used to call the API for refreshing looks like this:

function refresh(refreshToken) {
  const url = `${BASE_URL}/user/refresh`;
  return axios.post(url,JSON.stringify(refreshToken))
  .then(response =>response.data.data)
  .catch(e => {
      console.log(e);
  });
}

javascript vue.js axios interceptor

Answer 1

Answer №1

I encountered a similar issue, and I was able to resolve it by creating a new axios instance specifically for performing the refresh token API call. It's important to note that defining axios.interceptors.request.use did not solve the problem for me (the code snippet below serves as a basic example).

Don't forget to store the original request and process it after refreshing the token:

For example, you can define http-common.js like this:

import axios from 'axios'
const AXIOS = axios.create()
export default AXIOS

...

In App.vue:

axios.interceptors.request.use((config) => {
  let originalRequest = config
  if (helper.isTokenExpired(this.$store.getters.tokenInfo)) {
    return this.refreshToken(this.$store.getters.jwt).then((response) => {
      localStorage.setItem('token', response.data.token)
      originalRequest.headers.Authorization = response.data.token
      return Promise.resolve(originalRequest)
    })
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

And here is the method for refreshing the token:

    refreshToken (token) {
      const payload = {
        token: token
      }
      const headers = {
        'Content-Type': 'application/json'
      }
      return new Promise((resolve, reject) => {
        return AXIOS.post('/api/auth/token/refresh/', payload, { headers: headers }).then((response) => {
          resolve(response)
        }).catch((error) => {
          reject(error)
        })
      })
    }

Answer 2

I encountered a similar issue, and I was able to resolve it by creating a new axios instance specifically for performing the refresh token API call. It's important to note that defining axios.interceptors.request.use did not solve the problem for me (the code snippet below serves as a basic example).

Don't forget to store the original request and process it after refreshing the token:

For example, you can define http-common.js like this:

import axios from 'axios'
const AXIOS = axios.create()
export default AXIOS

...

In App.vue:

axios.interceptors.request.use((config) => {
  let originalRequest = config
  if (helper.isTokenExpired(this.$store.getters.tokenInfo)) {
    return this.refreshToken(this.$store.getters.jwt).then((response) => {
      localStorage.setItem('token', response.data.token)
      originalRequest.headers.Authorization = response.data.token
      return Promise.resolve(originalRequest)
    })
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

And here is the method for refreshing the token:

    refreshToken (token) {
      const payload = {
        token: token
      }
      const headers = {
        'Content-Type': 'application/json'
      }
      return new Promise((resolve, reject) => {
        return AXIOS.post('/api/auth/token/refresh/', payload, { headers: headers }).then((response) => {
          resolve(response)
        }).catch((error) => {
          reject(error)
        })
      })
    }

Updating the id token in VueJs using Axios interceptor when it expires

Answer №1

Similar questions

Pull information from database based on selection made in combo box

Set my click event handler back to its default setting

What's the best way to adjust the width of the <Input> component in Reactstrap?

It seems that the `to` required prop was missing in the `Link` component of React-Router

Is there a way to streamline and optimize this React/Material UI code for faster performance?

The behavior of Elementor lightbox buttons upon being clicked

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

React: The peculiar contradiction of useEffect with eventHandler props

Add to an array the recently created span element which was inputted through text in AngularJS

Using JLinq for Date-Based Filtering of JSON Data

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

Create a fresh field for the form and store the data in the database

Dilemma: Navigating the Conflict Between Context API and Next.js Routing in React

Step-by-step guide on redirecting to a different page following a successful POST API call using Jquery

What is the process for setting a cookie in Next.js from a different backend server?

Simple method for implementing a fade effect on a React component with raw JavaScript techniques?

When attempting to render a React child, it is important to note that objects are not valid (found: [object Promise]). If your intention was to display a collection of children, it is advised

Warning: The React Router v6's Route component is unable to find the origin of the key props

Leverage Node.js modules to reassign variable values