axios request interceptor for setting token in header and response interceptor for refresh token and repeat last api call

interceptors.js

axios.interceptors.request.use(function(config) {
  let userToken = localStorage.getItem('token');

  if (userToken) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + userToken;
    config.headers['Authorization'] = 'Bearer ' + userToken;
  }
  return config;
});

axios.interceptors.response.use(function(response) {
  // console.log('api response ok');
  return response;
}, function (error) {
  let code = parseInt(error.message.replace(/\D/g, ''));
  if (code === 401) { // status code for expired token
    // get token
    let token = localStorage.getItem('token');

    if (!token) {
      window.location = '/login'; // if there is no token in local storage navigate to login
      return;
    }

    somehowRefreshToken(); // handle in your own way

    return axios.request(error.config); // repeat last API call
  }
  return Promise.reject(JSON.parse(JSON.stringify(error)));
});

somehowRefreshToken() ???

somehowRefreshToken() ???

@CUIZIWEI

You'll have to handle it your own way. Meaning, you'll probably have to make an API call to get a new token. After that, you'll store it in the cookie, some central state or wherever you were storing it before.

But what about the state in the store?
If you repeat the request using axios.request (error.config), the request will be executed, but the data will not be written to the vuex store. We repeated the request, but did not execute the action.