[Axios] Interceptor - Refresh access token

axios-refresh-token.ts

import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use( (config: AxiosRequestConfig) => {

  // Optional headers
  if (store.state.tokenStore && store.state.tokenStore.tokens) {
    const token = store.state.tokenStore.tokens.accessToken;
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;

}, (error) => {
  return Promise.reject(error);
});




let isAlreadyFetchingAccessToken = false;

instance.interceptors.response.use( (response: AxiosResponse<any>) => {
  return response;
}, async (error: any) => {
  
  const { config, response: { status } } = error;
  const originalRequest = config;
  let isRefreshOk: boolean = false;

  if (status === 498) {
    if (!isAlreadyFetchingAccessToken) {
      isAlreadyFetchingAccessToken = true;
      isRefreshOk = await store.dispatch('refreshToken');
      isAlreadyFetchingAccessToken = false;
    }

    if (isRefreshOk) {
      const retryOriginalRequest = new Promise((resolve) => {
          resolve(instance(originalRequest));
      });
      return retryOriginalRequest; // Return the resposne from original request with new token
    } else {
      return Promise.reject(error); // Return original response
    }
  } else { // Non 498 response
   return Promise.reject(error);
  }
});

export default instance;

token-store.ts

import { UserToken } from '../classes/apiModel';
import axios from '../modules/axios-module';

export default {
  state: {
    tokens: {} as UserToken,
  },
  getters: {
    tokens: (state: any) => state.tokens,
  },
  mutations: {
    setTokens(state: any, tokens: UserToken) {
      state.tokens = tokens;
    }
  },
  actions: {

    async refreshToken({ commit, state }: { commit: any, state: any}) {
      const isRefreshOk = true;
      if (!state.tokens || !state.tokens.refreshToken) {
        return !isRefreshOk;
      }
      try {
        const url = 'api/Auth/RefreshToken';
        const res: any = await axios.post(state.tokens.refreshToken);
        const userToken = res.data;
        // Mutation
        commit('setTokens', userToken);
        // Return true/false for OK/NG
        return !!userToken ;
      } catch (err) {
        throw err;
      }
    },
  },
};