نیما خاکی
تفاوت های نسخه پنجم و ششم React Router Dom
تفاوت های React Router نسخه 6 و نسخه 5: کتابخانه React Router یک کتابخانه Server Side و Client Side است که برای مسیریابی در کتابخانه React استفاده میشود. React Router در جاهای مختلفی استفاده میشود، مثل سمت فرانت، سمت سرور و حتی در React Native. توی نسخه ششم این کتابخانه تغییرات زیادی در پس زمینه اتفاق افتاده، مثل بهینه سازی الگوریتم های مسیریابی اضافه شدن چندین Component جدید و همچنین کاهش 58 درصدی سایز باندل. تو این مقاله تلاش میکنیم تا چند مورد از تغییرات بین نسخه پنجم و ششم این کتابخانه رو ذکر کنیم. کلمه Switch با Routes جایگزین شد در نسخه ششم دیگه Switch رو نمیشه از react-router-dom ااکسپرت کرد. در نسخه های قبلی میتونستیم از Switch استفاده کنیم که Route ها رو درونش قرار بدیم. ولی در نسخه ششم به جای Switch از Routes استفاده میکنیم که Route ها رو درونش قرار میدیم. نحوه تعریف کردن Route تغییر کرده است کامپوننتی که باید بر اساس یه Route در مسیریابی render شود دیگه نمیتونه به عنوان یک فرزند به Route پاس داده شود و باید به عنوان یک prop با نام element به Route پاس داده شود دیگه نیازی به کلمه exact نیست با نسخه ششم React Router دیگه نیازی به کلمه exact نیست. همون طور که در این مقاله ذکر شده، به علت بهینه شدن الگوریتم نسخه ششم router به راحتی میتوانیم یک Component رو در یک مسیر خاص render کنیم بدون اینکه به کلمه exact نیازی داشته باشیم. در نسخه های قبلی router از بالا به پایین به ترتیب route ها رو چک میکرد ولی در نسخه ششم الگوریتم بهتری برای لود کردن route ها داره و نیازی نیست که نگران ترتیب route ها باشیم چون دیگه ترتیب route ها دیگه مهم نیست. برای اینکه درک بهتری از سه مبحثی که گفته شد داشته باشید میتونید به تیکه کدهای پایین یه نگاه بندازید. نسخه پنجم: نسخه ششم: دیگه نیازی به نصب react-router-config به صورت جداگانه نیست کتابخانه react-router-config به ما قابلیت تعریف کردن route ها رو به صورت آبجکت های جاوا اسکریپتی به جای المان های ری اکتی میداد، که تمامی توابع این کتابخانه به هسته نسخه ششم اضافه شده است. نسخه پنجم: نسخه ششم: کلمه useNavigate جایگزین useHistory شده است. در نسخه ششم router مسیریابی تغییراتی داشته که useHistory در بیشتر جاها جایگزین useHistory شده است. بعضی از قابلیت های پر استفاده تابع useHistory مثل go, goBack و goForward را هم میتوان با useNavigate پیاده سازی کرد فقط باید به router بگیم که چند مرحله جلو یا عقب بره. که برای جلو رفتن از اعداد مثبت و برای برگشت به عقب از اعداد منفی استفاده میکنیم. نسخه پنجم : نسخه ششم: دیگه NavLink هیچ prop ای به عنوان activeClassName و activeStyle نداره در نسخه های قبلی میتونستیم کلاس یا استایل جداگانه ای به NavLink بدیم زمانی که NavLink مورد نظرمون فعال بود، ولی در نسخه ششم router، این دو prop حذف شده و برای دستیاب به نتیجه قبلی باید از روشی متفاوت عمل کنیمد. در نسخه ششم NavLink یک تابع که به ما یک سری اطلاعات میده رو به صورت ورودی میگیره که راحت تر و بهتر استایل ها رو کنترل کنیم. جایگزینی Redirect با Navigate در نسخه ششم دیگه Redirect در کتابخانه react-router-dom وحود نداره و به جاش از Navigate استفاده میکنیم. امیدوارم این مقاله برای استفاده از نسخه ششم react-router-dom بهتون کمک کرده باشه.
نیما خاکی
پیاده سازی منطق 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 رو به صورت اتوماتیک پیاده سازی کنیم.