رفرش توکن نکست: آموزش پیاده سازی رفرش توکن در NEXTJS App Router

تو این ویدیو ما سیستم رفرش توکن و با nextjs app dir مطمئن میشیم همیشه تازه ترین توکن تو درخواست هایی که به بک اند میزنیم هستش

بعد از اپلود ویدیو قبلی چندتا درخواست داشتید از من و اینطوری بود که جوری پیاده سازی بشه این سیستم که:
۱) با axios این سیستم پیاده سازی بشه
۲) یه جوری ما access token و یکبار ست کنیم و تو تمام درخواست های سمت سرور قرار بگیره لازم نباشه دستی تو هر درخواستی قرارش بدیم

که سعی کردم هردوی این موارد و تو این ویدیو کاور کنم و آموزش بدم


حتما پیشنهاد میکنم ویدیو های مربوط به پیاده سازی سیستم احراز هویت بدون کتابخانه و refresh توکن در ری‌اکت و قبل از تماشای ویدیو دیده باشید، خیلیییی به اون ویدیوها ربط داره

   • سیستم لاگین با nextjs:‌ بدون نیاز به ...  

   • ساده ترین روش پیاده سازی رفرش توکن در...  

لینک گیتهاب ریپازیتوری مربوط به کد های ویدیو:
https://github.com/nimaa77/youtube-ne...

برای امنیت بیشتر و جلوگیری از دسترسی غیر مجاز به اطلاعات و حساب کاربر، بازه زمانی که accessToken اعتبار داره رو ما کم میکنیم (مثلا ۱ دقیقه) و اینطوری بعد گذشتن این تایم کوتاه توکن باطل میشه و ما باید اونو رفرش کنیم تا یه توکن جدید بگیریم (که اونم ۱ دقیقه اعتبار داشته باشه و ...

فرایند رفرش شدن نیاز داره به یه توکنی نام refresh token، رو کاغذ و وقتی تو ذهنمون درباره‌ش فکر میکنیم خیلی ساده به نظر میاد. "هروقت توکن باطل شد یه درخواست بزن توکن جدید بگیر" ولی پیاده سازی این موضوع خیلی پیچیدگی های دیگه‌ای داره. مخصوصا وقتی ما اپلیکیشین تحت وب داریم و از ابزار ری اکت یا فریمورک های نکست و ریمیکس استفاده میکنیم.

تو react ممکنه چندتا کامپوننت همزمان بیان رو صفحه و هرکدوم ممکنه بخوان همزمان یه دیتای متفاوت رو بگیرن ممکنه چندبار این درخواست رفرش شدن توکن به سمت سرور ارسال بشه و اینجا ما race condition داریم و این باعث میشه این عملیات به مشکل بخوره و اپلیکیشن ما درست کار نکنه.


00:00 - مقدمه
01:58 - مروری بر سیستم لاگین قبلی
03:15 - پیاده سازی تابع رفرش توکن
08:50 - رفرش کردن توکن در میدلور
16:28 - رفرش کردن سشن روی مرورگر
20:00 - اکسیوس و interceptor برای رفرش کردن
27:49 - دریافت و ارسال دیتا با تازه ترین توکن
29:40 - اینجکت کردن هدر auth سمت سرور
34:24 - جمع بندی و پایان


Website: https://react.ir
Twitter:   / react_ir  
Instagerm:   / react_ir  
Telegram: https://t.me/react_ir

Personal Twitter:   / nima_arf  
Personal Instagram:   / nima_arf  
Personal Github: https://github.com/nimaa77