Handling refresh token by recall same request after refreshing the token

Hi, I am trying to make a common interceptor to authorize all my outgoing requests.

My logic is as follows:

All my outgoing requests/API calls passes through the interceptor first to check on my token expiry and in-case the response was un-authorized I make an internal call to refresh the token and update my storage keys with the new values.

Now I need to recall the original request with the new token value, but I can’t figure out how to detect the original request that passed through the interceptor.

This is my code :

export  const unregister =  fetchIntercept.register({
  request: function (url, config) {
    return [url, config];
  },

  requestError: function (error) {
    return Promise.reject(error);
  },
  responseError: function (error) {
    return Promise.reject(error);
  },

  response: function (response) {
    if (response.status == 401) {
      Services.refreshToken((res)=>{
        if (res.message == 'success') {
          // if token has been refreshed
          // recall the request again
        }else {
          // login again
        }
      })
    }else {
      return response;
    }
  }
})

The problem is that I’ve no idea how to recall the same request that passed through the interceptor… I did some search on this, but couldn’t find a way to execute this.

[vitorcamachoo]

Here is example of refresh token and recall the original request

const originalRequest = {}
export const interceptor = fetchIntercept.register({    
    request: function (url, config) {
        originalRequest.url = url
        originalRequest.config = config
        return [url, config];
    },
 
    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call        
        return Promise.reject(error);
    },
 
    response: async function (response) {
        if(response.status === 401)
        {
            const {url, config} = originalRequest
            if(url.includes('token'))
            {
                interceptor()
                return Promise.reject("Session expired");
            }
            else
            {                
                return AppStore.dispatch(AuthActions.refresh_token())
                        .then((data) => {
                            config['headers']['Authorization'] = 'Bearer '+data.token
                            return fetch(url, config)
                        })
                        .catch((error) => {
                            return Promise.reject(error)
                        })                            
            }            
        }
        else
        {
            return response
        }        
    },
 
    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});

This will not work if multiple requests were made in parallel. It will use the wrong url and config

[ovaiss]

Here is example of refresh token and recall the original request

const originalRequest = {}
export const interceptor = fetchIntercept.register({    
    request: function (url, config) {
        originalRequest.url = url
        originalRequest.config = config
        return [url, config];
    },
 
    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call        
        return Promise.reject(error);
    },
 
    response: async function (response) {
        if(response.status === 401)
        {
            const {url, config} = originalRequest
            if(url.includes('token'))
            {
                interceptor()
                return Promise.reject("Session expired");
            }
            else
            {                
                return AppStore.dispatch(AuthActions.refresh_token())
                        .then((data) => {
                            config['headers']['Authorization'] = 'Bearer '+data.token
                            return fetch(url, config)
                        })
                        .catch((error) => {
                            return Promise.reject(error)
                        })                            
            }            
        }
        else
        {
            return response
        }        
    },
 
    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});