How can I get an axios interceptor to retry the original request?

Question

I am trying to implement a token refresh into my vue.js application. This is working so far, as it refreshes the token in the store on a 401 response, but all I need to do is get the interceptor to retry the original request again afterwards.

main.js

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        console.log("original request", error.config);
        if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
            store.dispatch("authRefresh")
                .then(res => {
                    //retry original request???
                })
                .catch(err => {
                    //take user to login page
                    this.router.push("/");
                });
        }
    }
);

store.js

authRefresh(context) {
    return new Promise((resolve, reject) => {
        axios.get("auth/refresh", context.getters.getHeaders)
            .then(response => {
                //set new token in state and storage
                context.commit("addNewToken", response.data.data);
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
},

I can log the error.config in the console and see the original request, but does anyone have any idea what I do from here to retry the original request? and also stop it from looping over and over if it fails.

Or am I doing this completely wrong? Constructive criticism welcome.

Answer 1

You could do something like this:

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {

  const originalRequest = error.config;

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

    originalRequest._retry = true;

    const refreshToken = window.localStorage.getItem('refreshToken');
    return axios.post('http://localhost:8000/auth/refresh', { refreshToken })
      .then(({data}) => {
        window.localStorage.setItem('token', data.token);
        window.localStorage.setItem('refreshToken', data.refreshToken);
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
        originalRequest.headers['Authorization'] = 'Bearer ' + data.token;
        return axios(originalRequest);
      });
  }

  return Promise.reject(error);
});

Answer 2

Implementation proposed by @Patel Pratik is good but only handles one request at a time.

For multiple requests, you can simply use axios-auth-refresh package. As stated in documentation:

The plugin stalls additional requests that have come in while waiting for a new authorization token and resolves them when a new token is available.

https://www.npmjs.com/package/axios-auth-refresh