GET query invoked with a previous token after 401 about axios-auth-refresh

[Flyrell]

Well, this happens because when the token is refreshed, the last request is just retried from the error configuration that axios provides. It does not trigger any logic as it was already triggered before making the first request.

const data = await axios.get(`http://someUrl/check_token?token=${getToken()}`);
/**
 * Before running the actual axios.get method, the above line gets evaluated to:
 * const data = await axios.get('http://someUrl/check_token?token=some-token');
 */

/**
 * The call returns 401, so the library takes it from here...
 *   1. `refreshAuthLogic` function gets called
 *   2. After refreshing, the error config (with the previously evaluated URL) gets called again.
 *      As the token is not bound dynamically, the URL still has the old token as the query parameter.
 */

There is few ways (I can think of) you can accomplish what you're looking for:

1. Use interceptor to bind the token as a query parameter dynamically. Although it would work, it might be a bit too much logic for what you're trying to accomplish, especially when it's only for one request (as it runs before every request).

const data = await axios.get('http://someUrl/check_token?token={token}');
axios.interceptors.request.use(config => config.params.token = getToken());

2. In the refreshAuthLogic function there is an error object available for you. You can replace the query parameters after refreshing the token.

// Library initialization
createAxiosAuthRefresh(axios, async (errorConfig) => {
  const response = await axios.post('https://someUrl/refresh_auth');
  setToken(response.data.token); // this would be your usual logic to set the token globally
  errorConfig.params.token = response.data.token; // this would replace the parameters in the retried requrest
});

const data = await axios.get(`http://someUrl/check_token?token=${getToken()}`);

I haven't tested any of this, but it should work with a little bit of polishing. At least I hope you get the idea. I think the second option is the good way to accomplish what you're trying to, you just need to figure out how to alter the error config.

[Flyrell]

Hope that helped. Please, use StackOverflow for the future implementation related questions 🤓