Axios response interceptor for refreshing token keeps firing-CodePudding

The logic: On every request there's a JWT Authorization header that authenticates the user. If that expires, there's a cookie endpoint in place ready to refresh the JWT.

I am using axios and interceptor response to check if the client gets a 401 to try and refresh the JWT. The cookie may be valid or not.

The problem is that the interceptor to refresh the JWT never stops firing, and I think I have something wrong with the synchronization of the requests. Below is my code:

function refreshToken(dispatch) {
  return new Promise((resolve, reject) => {
    instance.put('/auth').then((response) => {
      dispatch({ type: "UPDATE_AUTH", payload: response.data });
      resolve(response);
    })
    .catch((error) => {
      reject(error);
    });
  });
}

instance.interceptors.response.use(
    response => {
      return response;
    },
    err => {
      const error = err.response;
      
      if (error.status === 401 && error.config && !error.config._retry) {
        error.config._retry = true;

        return refreshToken(dispatch).then((resp) => {
          return instance(error.config);
        })
        .catch((e) => {
          return Promise.reject(e);
        });
      }
      return Promise.reject(error);
    }
  );

CodePudding user response：

If you have more then one parallel requests, refresh the JWT will be equal to the number of requests. Try to send /auth only first time and prevent next requests. You can use localStorage for this task.

let requests = [];

instance.interceptors.response.use(
  response => {
    return response;
  },
  err => {
    const error = err.response;
    
    if (error.status === 401 && error.config && !error.config._retry) {
      requests.push(error.config);
      if (!localStorage.getItem('refresh')) {
        localStorage.setItem('refresh', 'done');
        error.config._retry = true;

        return refreshToken(dispatch).then((resp) => {
          localStorage.removeItem('refresh');
          
           const token = getAccessToken();
           requests.map(req => {
              req.headers.Authorization = `Bearer ${token}`;
              return instance(req)
           })
        })
        .catch((e) => {
          localStorage.removeItem('refresh');
          return Promise.reject(e);
        });
      }
    } else {
      requests = [];
    }
    return Promise.reject(error);
  }
);