Axios interceptors for token refreshing and more than 2 async requests available

axios-interceptors-refresh-token.js

let isRefreshing = false;
let refreshSubscribers = [];

const instance = axios.create({
  baseURL: Config.API_URL,
});

instance.interceptors.response.use(response => {
  return response;
}, error => {
  const { config, response: { status } } = error;
  const originalRequest = config;

  if (status === 498) {
    if (!isRefreshing) {
      isRefreshing = true;
      refreshAccessToken()
        .then(newToken => {
          isRefreshing = false;
          onRrefreshed(newToken);
        });
    }

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });
    return retryOrigReq;
  } else {
    return Promise.reject(error);
  }
});

subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}

onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}

Hey , looks great . can you do full code with authService.jwtRefresh ?
Thanks

that function is just about firing a request to a backend server URL, it's different for every project, no point showing it.

@kakarukeys Thank you, I will try it

i need to reject the original err if refrest token failed, and some time the dead loop
also notice if you use nuxtjs and the nuxt axios module, use api.request replace api.$request, because api.$request only get the response data attribute.

we also need filte out the refresh request itself by url or other attribute
in store action dispatched i just use another axios instance so dont need it.

import _ from 'lodash'

let isRefreshing = false
let refreshQueue = []
const retries = 1

export default function ({ $axios, store }, inject) {
  const api = $axios._create()

  api.onResponseError((err) => {
    const {
      config: orgConfig,
      response: { status },
    } = err

    if (status !== 401) {
      return Promise.reject(err)
    }

    orgConfig._retry =
      typeof orgConfig._retry === 'undefined' ? 0 : ++orgConfig._retry

    if (orgConfig._retry === retries) {
      return Promise.reject(err)
    }

    if (!isRefreshing) {
      isRefreshing = true

      store
        .dispatch('user/refresh')
        .then((res) => {
          refreshQueue.forEach((v) => v.resolve(res))
          refreshQueue = []
        })
        .catch(() => {
          refreshQueue.forEach((v) => v.reject(err))
          refreshQueue = []
        })
        .finally(() => {
          isRefreshing = false
        })
    }

    return new Promise((resolve, reject) => {
      refreshQueue.push({
        resolve: (res) => {
          const config = _.merge(orgConfig, res)
          resolve(api.request(config))
        },
        reject: (err) => {
          reject(err)
        },
      })
    })
  })

  inject('api', api)
}

You just saved my day @garryshield

you da man @garryshield.

love u @garryshield

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });

this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried

@ifier Have you found a solution to the problem? I have the same thing now

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });

this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried

thanks, that's true

Can someone explain how to show message toast just once if for example we get from several requests 401 status at the same time ?
How to write correctly in interceptor it ? - with toggle it doesn't work - because it always jump to check by 401 status and change toggle every bad request that you get

const responseInterceptor = axiosAPI.interceptors.response.use(
            response => response,
            async (error) => {
                const {config: originalRequest, response: {status}} = error
                if (status === 401 || status === 403) {
                   if (!isFetchingToken) {
                       isFetchingToken = true
                       returnMessage(status).then(() => {
                           isFetchingToken = false
                       })
                }
                return Promise.reject(error)
            }
        )

I just want to one error message - and it doesn't matter how many requests I use
I would be grateful if someone could advise)

here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh
so i don't get more then one 401

import axios, { AxiosError } from 'axios';
import { Store } from 'redux';
import axiosMiddlewareFactory from 'redux-axios-middleware';
import AppConfig from '~/config/appConfig';
import needError from '~/helpers/needError';
import { networkOffline, showError } from '~/modules/app/actions/AppActions';
import {
  IRefreshTokenData,
  logout,
  refreshToken,
  refreshTokenSuccess,
} from '~/modules/auth/actions/AuthActions';
import {
  getIsAuthenticated,
  getRefreshToken,
  getToken,
} from '~/modules/auth/AuthSelectors';
import { ErrorCodes } from '~/modules/auth/models';
import { getProfile } from '~/modules/settings/SettingsSelector';

type IRequestCb = (token: string) => void;

export const axiosClient = axios.create({
  baseURL: AppConfig.apiUrl,
  responseType: 'json',
});

let isRefreshing = false;
let refreshSubscribers: IRequestCb[] = [];
let refreshRetry = true;

const subscribeTokenRefresh = (cb: IRequestCb) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map(cb => cb(token));
};

const axiosMiddlewareOptions = {
  interceptors: {
    request: [
      ({ getState }: Store, request: any) => {
        const state = getState();
        const token = getToken(state);

        if (token) {
          request.headers.authorization = `Bearer ${token}`;
        }

        return request;
      },
    ],
    response: [
      {
        error: function ({ getState, dispatch }: Store, error: AxiosError) {
          const state = getState();
          const accessToken = getToken(state);
          const profile = getProfile(state);

          const { teamId, roleId } = profile || {};
          const isAuthenticated = getIsAuthenticated(state);

          if (error?.response?.status === 401) {
            const refresh = getRefreshToken(state);
            const originalRequest = error.config;

            const retryOrigReq = new Promise(resolve => {
              subscribeTokenRefresh((newToken: string) => {
                // replace the expired token and retry
                if (originalRequest.headers) {
                  originalRequest.headers.authorization = `Bearer ${newToken}`;
                }
                resolve(axios(originalRequest));
              });
            });

            if (!isRefreshing && accessToken && refresh && roleId && teamId) {
              isRefreshing = true;

              refreshToken({
                accessToken,
                refreshToken: refresh,
                roleId,
                teamId,
              })
                .then(
                  ({
                    accessToken: newAccessToken,
                    refreshToken: newRefreshToken,
                  }: IRefreshTokenData) => {
                    if (originalRequest.headers) {
                      originalRequest.headers.authorization = `Bearer ${newAccessToken}`;
                      dispatch(
                        refreshTokenSuccess({
                          accessToken: newAccessToken,
                          refreshToken: newRefreshToken,
                          roleId,
                          teamId,
                        }),
                      );
                      refreshRetry = true;

                      onRefreshed(newAccessToken);
                    }
                  },
                )
                .catch(e => {
                  Bugsnag.notify(e);
                  if (
                    e.response?.data?.error &&
                    needError(e.response?.config)
                  ) {
                    dispatch(showError(e.response?.data.error));
                  } else if (refreshRetry) {
                    refreshRetry = false;
                  } else {
                    dispatch(
                      showError(
                        'Unable to restore session. Please login again',
                      ),
                    );
                    dispatch(logout());
                  }
                  return Promise.reject(error);
                })
                .finally(() => {
                  isRefreshing = false;
                });
            }

            return retryOrigReq;
          } else if (error?.response?.status === 403) {
            // user deactivated
            dispatch(
              showError(
                'Your account has been locked. Contact your support person to unlock it, then try again.',
              ),
            );
            dispatch(logout());
          } else if (
            [
              ErrorCodes.passwordExpired,
              ErrorCodes.accountDeleted,
              ErrorCodes.accountLocked,
            ].includes(error?.code as ErrorCodes)
          ) {
            if (isAuthenticated) {
              // password expired, account deleted, locked
              dispatch(showError(error.message));
              dispatch(logout());
            }
          } else {
            if (error.code === ErrorCodes.network) {
              dispatch(networkOffline());
            } else if (
              ((error.response?.data as { error: string })?.error ||
                error.message) &&
              needError(error.response?.config)
            ) {
              dispatch(
                showError(
                  (error.response?.data as { error: string })?.error ||
                    error.message,
                ),
              );
            }

            return Promise.reject(error);
          }
        },
      },
    ],
  },
};

const axiosMiddleware = axiosMiddlewareFactory(
  axiosClient,
  axiosMiddlewareOptions,
);

export default axiosMiddleware;

FishManHell

here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh so i don't get more then one 401

import axios, { AxiosError } from 'axios';
import { Store } from 'redux';
import axiosMiddlewareFactory from 'redux-axios-middleware';
import AppConfig from '~/config/appConfig';
import needError from '~/helpers/needError';
import { networkOffline, showError } from '~/modules/app/actions/AppActions';
import {
  IRefreshTokenData,
  logout,
  refreshToken,
  refreshTokenSuccess,
} from '~/modules/auth/actions/AuthActions';
import {
  getIsAuthenticated,
  getRefreshToken,
  getToken,
} from '~/modules/auth/AuthSelectors';
import { ErrorCodes } from '~/modules/auth/models';
import { getProfile } from '~/modules/settings/SettingsSelector';

type IRequestCb = (token: string) => void;

export const axiosClient = axios.create({
  baseURL: AppConfig.apiUrl,
  responseType: 'json',
});

let isRefreshing = false;
let refreshSubscribers: IRequestCb[] = [];
let refreshRetry = true;

const subscribeTokenRefresh = (cb: IRequestCb) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map(cb => cb(token));
};

const axiosMiddlewareOptions = {
  interceptors: {
    request: [
      ({ getState }: Store, request: any) => {
        const state = getState();
        const token = getToken(state);

        if (token) {
          request.headers.authorization = `Bearer ${token}`;
        }

        return request;
      },
    ],
    response: [
      {
        error: function ({ getState, dispatch }: Store, error: AxiosError) {
          const state = getState();
          const accessToken = getToken(state);
          const profile = getProfile(state);

          const { teamId, roleId } = profile || {};
          const isAuthenticated = getIsAuthenticated(state);

          if (error?.response?.status === 401) {
            const refresh = getRefreshToken(state);
            const originalRequest = error.config;

            const retryOrigReq = new Promise(resolve => {
              subscribeTokenRefresh((newToken: string) => {
                // replace the expired token and retry
                if (originalRequest.headers) {
                  originalRequest.headers.authorization = `Bearer ${newToken}`;
                }
                resolve(axios(originalRequest));
              });
            });

            if (!isRefreshing && accessToken && refresh && roleId && teamId) {
              isRefreshing = true;

              refreshToken({
                accessToken,
                refreshToken: refresh,
                roleId,
                teamId,
              })
                .then(
                  ({
                    accessToken: newAccessToken,
                    refreshToken: newRefreshToken,
                  }: IRefreshTokenData) => {
                    if (originalRequest.headers) {
                      originalRequest.headers.authorization = `Bearer ${newAccessToken}`;
                      dispatch(
                        refreshTokenSuccess({
                          accessToken: newAccessToken,
                          refreshToken: newRefreshToken,
                          roleId,
                          teamId,
                        }),
                      );
                      refreshRetry = true;

                      onRefreshed(newAccessToken);
                    }
                  },
                )
                .catch(e => {
                  Bugsnag.notify(e);
                  if (
                    e.response?.data?.error &&
                    needError(e.response?.config)
                  ) {
                    dispatch(showError(e.response?.data.error));
                  } else if (refreshRetry) {
                    refreshRetry = false;
                  } else {
                    dispatch(
                      showError(
                        'Unable to restore session. Please login again',
                      ),
                    );
                    dispatch(logout());
                  }
                  return Promise.reject(error);
                })
                .finally(() => {
                  isRefreshing = false;
                });
            }

            return retryOrigReq;
          } else if (error?.response?.status === 403) {
            // user deactivated
            dispatch(
              showError(
                'Your account has been locked. Contact your support person to unlock it, then try again.',
              ),
            );
            dispatch(logout());
          } else if (
            [
              ErrorCodes.passwordExpired,
              ErrorCodes.accountDeleted,
              ErrorCodes.accountLocked,
            ].includes(error?.code as ErrorCodes)
          ) {
            if (isAuthenticated) {
              // password expired, account deleted, locked
              dispatch(showError(error.message));
              dispatch(logout());
            }
          } else {
            if (error.code === ErrorCodes.network) {
              dispatch(networkOffline());
            } else if (
              ((error.response?.data as { error: string })?.error ||
                error.message) &&
              needError(error.response?.config)
            ) {
              dispatch(
                showError(
                  (error.response?.data as { error: string })?.error ||
                    error.message,
                ),
              );
            }

            return Promise.reject(error);
          }
        },
      },
    ],
  },
};

const axiosMiddleware = axiosMiddlewareFactory(
  axiosClient,
  axiosMiddlewareOptions,
);

export default axiosMiddleware;

FishManHell

Hi, I hope you're doing well.
can you please show an example that how to make a request?
could I just use axios client?

thanks

you need to clear array after callbacks

onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
  refreshSubscribers = [];
}