DEV Community

Cover image for How to Refresh Json Web Tokens (JWT) using Axios Interceptors

How to Refresh Json Web Tokens (JWT) using Axios Interceptors

Francisco Mendes on June 18, 2022

Axios is a very popular http client in the community responsible for making http requests to third party services. And in the case of today, it wil...
Collapse
 
laozhu profile image
Ritchie Zhu

Great article šŸ‘

I have a small question about men here, according to official README, the men is not designed for async function, p-memoize is for async function. should we use p-memoize instead of men here?

If you want to memoize Promise-returning functions (like async functions), you might be better served by p-memoize.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for the feedback, on projects I've been working on or using moize or mem, so far I haven't had any problems to be honest, but you can always try it out.

Collapse
 
unthrottled profile image
Alex Simons

Had a question, does mem handle cache stampeding?

I know that libraries like dataloader where designed to handle such cases where multiple request for the same object happen at the same time. It will coalesce all the calls, make one call to the function, and supply all the batched calls with the value returned from the function.

Was just wondering if mem does the same thing. Thanks!

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

To tell you the truth, I don't know, I like to use mem whenever I'm going to invoke a function in a consecutive way and I want to cache it for a certain period of time.

It's a simple approach, but it's been working properly so far, but thanks a lot for the question!

Collapse
 
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

great and consise article, thanks!

looking at the memoization, any reason for choosing this value for maxAge? just wondering

const maxAge = 10000;

export const memoizedRefreshToken = mem(refreshTokenFn, {
maxAge,
});

Collapse
 
franciscomendes10866 profile image
Francisco Mendes • Edited

Thanks for the feedback! Regarding the value of maxAge, in the article I put ten seconds but I usually use a value close to twenty. This is because http requests may have a timeout (maybe not the best word to describe it) which may be longer than maxAge value.

Collapse
 
tenzingtlama2001 profile image
TenzingT-Lama2001

Was fixing an error related to req/res interceptors the whole day! You saved my ass! Thanks a lot.

Collapse
 
sainig profile image
Gaurav Saini

Very nice and to the point article.
Iā€™m also using a similar interceptor, but after getting the new access token, I was struggling to replay the failed request. This was a great help, thanks šŸ‘

Collapse
 
franciscomendes10866 profile image
Francisco Mendes • Edited

Glad to know!

Collapse
 
qiyang13 profile image
Qi Yang • Edited

May I know why don't set a _retry flag on response interceptor instead of using memoize function ?

Collapse
 
laozhu profile image
Ritchie Zhu

Different purpose here:

  • .sent or ._retry flag means you has tried to refresh token once, but failed
  • memorized function is to optimize multiple refresh token requests during a short time.
Collapse
 
omobayode6 profile image
Omobayode Festus • Edited

Thanks a lot.
How do I use axiosPrivate in my axios request that require autorization?

I can see that axiosPrivate = axios;
but how do I use it from here?