پیاده سازی منطق Refresh Token با JWT و Axios

پیاده سازی منطق Refresh Token با JWT و Axios

تو این پست میخوایم منطق Refresh Token رو در کتابخانه React با کمک کتابخانه محبوب Axios پیاده سازی کنیم.

زمانی که کاربر از صفحه یا قسمت ورود مشخصات کاربری خودش رو وارد میکنه، در صورت درست بودن اطلاعات وارد شده، از سرور یک Access Token و یک Refresh Token میگیره.
با کمک Interceptor های Axios  اپلیکیشن ری اکت ما میتونه چک کنه که آیا در آخرین درخواستی که به سمت سرور فرستاده شده، توکن JWT ما منقضی شده یا نه. که در صورت منقضی بودن Access Token ما، Axios یه درخواست برای تازه سازی Access Token  میده و به صورت اتوماتیک آخرین درخواستی که به خاطر معتبر نبودن  توکن به خطای سروری(401) خورده بود رو تکرار میکنه.

برای درک بهتر این مفاهیم بیاین به این تیکه کد باهم نگاه کنیم.

در تکه کد بالا وقتی یک درخواست به سرور به خطا میخوره اول چک میکنیم که از صفحه ورد نباشه( چون در این صورت یعنی کاربر نام کاربری و یا رمز عبور رو اشتباه وارد کرده و نیازی به refresh token نیست.)

در مرحله بعد چک میکنیم که آیا خطای سرور از نوع 401 هست یا نه؟(خطای معتبر نبودن و یا منقضی شدن token)
و اینکه آیا این مرحله رو قبلا برای این درخواست تکرار کردیم یا خیر که اگه شروط ما true برگردونه اول

 متغیری که   تکراری بودن  درخواست رو در خودش ذخیره میکنیم به حالت true در میاریم که در صورت تکرار  همین خطا با همین شرایط  برنامه تو حلقه بی پایان گیر نکنه و بعدش access token رو به روز رسانی میکنیم
و در نهایت هم درخواستمون رو تکرار میکنیم و به سمت سرور میفرستیم.

با همین چند خط کد میتونیم منطق refresh token رو به صورت اتوماتیک پیاده سازی کنیم.