axios interceptors for refresh token

axios.refresh_token.js

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);
});

I have 2 async requests, each of them calls refresh_token api. How can I prevent extra api being called?

Hello @ryan-ds17,
plz take a look, https://gist.github.com/mkjiau/650013a99c341c9f23ca00ccb213db1c

why put the new token in defaults and originalRequest? won't one of them do?

@poohsen the originalRequest is a cached configuration copy of the previous request that contains the expired token. The configuration, in this case the headers part also needs to be updated as it won't use the axios defaults even after it has been set.

I have multiple ajax calls in a page in that case many ajax is getting 401 hence many refresh token calls .@poohsen can we avoid this ?