Breaking News: Grepper is joining You.com. Read the official announcement!

send refresh token in axios interceptor

Mystic Dev answered on June 27, 2022 Popularity 10/10 Helpfulness 4/10

answer send refresh token in axios interceptor

send refresh token in axios interceptor

Comment

import axios from "axios";
import { fetchProps } from "store/types/CommonType";
import { getLoginCredentials, setLogout } from "utils/helper";

const rootURL = process.env.REACT_APP_ROOT_URL;
let isRefreshing = false;
let refreshSubscribers: any = [];
const localData: any = localStorage.getItem("Auth");
const parsData = JSON.parse(localData);

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const status = error?.response?.data?.error?.status;
    const originalRequest = error?.config;
    
    if (status === 401) {
      if (!isRefreshing) {
        isRefreshing = true;
        axios
          .post(`${rootURL}refresh`, {
            refreshToken: parsData?.tokens?.refreshToken,
          })
          .then(({ data }) => {
            isRefreshing = false;
            const valueToRefresh = {
              ...parsData,
              token: data?.accessToken,
              tokens: {
                accessToken: data?.accessToken,
                refreshToken: parsData?.tokens?.refreshToken,
              },
            };
            localStorage.setItem("Auth", JSON.stringify(valueToRefresh));
            onRefreshes(data?.accessToken);
          })
          .catch((e) => {
            setLogout(window?.history);
          });
      }
      const retryOrigReq = new Promise((resolve, reject) => {
        subscribeTokenRefresh((accessToken: any) => {
          originalRequest.headers["Authorization"] = "Bearer " + accessToken;
          resolve(axios(originalRequest));
        });
      });
      return retryOrigReq;
    } else {
      return Promise.reject(error);
    }
  }
);

function subscribeTokenRefresh(cb: any) {
  refreshSubscribers.push(cb);
}

function onRefreshes(accessToken: any) {
  refreshSubscribers.map((cb: any) => cb(accessToken));
}

const fetchHandler = (
  { url, method = "GET", actionType, body, secure }: fetchProps,
  successHandler?: (p: object) => void,
  errorHandler?: (p: object) => void
) => {
  const getMethod: any = method;
  const authValue = getLoginCredentials();

  axios({
    method: getMethod,
    headers: {
      "Content-Type": "application/json",
      ...(secure && { Authorization: `Bearer ${authValue?.token}` }),
      "Access-Control-Allow-Origin": "*",
    },
    url: `${rootURL}${url}`,
    ...(method !== "GET" && { data: body }),
  })
    .then((response) => {
      return triggerSuccessHandler(response);
    })
    .catch((err) => {
      return errorHandler && errorHandler(err);
    });

  const triggerSuccessHandler = (response: any) => {
    return successHandler ? successHandler(response?.data) : null;
  };
};
export default fetchHandler;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: axios interceptor javascript refresh-token send

Link to this answer
Share Copy Link

Contributed on Jun 27 2022

Mystic Dev

0 Answers Avg Quality 2/10

send refresh token in axios interceptor

Contents

More Related Answers

send refresh token in axios interceptor

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.