آموزش کامل React-Router 4 به همراه مثالهای کاربردی - قسمت 2 - مسیرهای تو در تو و احراز هویت کاربران



visibility  
mode_comment   ۰

آموزش کامل React-Router 4 به همراه مثالهای کاربردیدر این قسمت، مطلب آموزش کامل React-Router 4 به همراه مثالهای کاربردی رو ادامه خواهیم داد. در قسمت قبل موارد ابتدایی مربوط به React-router 4 و Basic Routing یا مسیردهی ساده آموزش داده شد و در این قسمت با ادامه مباحث در خدمتتون هستیم.

مسیرهای تودرتو و URL parameters

فرض کنیم که ما URL هایی مثل /courses/business و /courses/technology/ بصورت همزمان نیاز داشته باشیم. برای اینکار بنظرتون چطوری میتونیم عمل کنیم؟

برای اینکار میتونیم در فایل App.js کدهای زیر رو قرار بدیم:

اگر آدرس صفحه با مسیر /courses مطابقت پیدا کنه، در نتیجه کامپوننت Courses رندر میشه و در نتیجه سه لینک مربوط به Technology و Business و Economics نمایش داده میشن. اگر بر روی لینکها کلیک کنیم و یا خودمون آدرس رو بصورت دستی تغییر بدیم به طوری که آدرس صفحه برابر با /courses/technology یا /courses/business یا /courses/economics بشه، به ترتیب متن This is technology و This is business و This is economics نمایش داده میشه.

شاید با خودتون بگید که چقد کد تکراری در مثال بالا وجود داره و به عنوان یک توسعه‌دهنده به دنبال یک راه برای ساده‌سازی و Refactor کردن باشید. هر چه کدها بیشتر باشه، سختتر میتونیم یک Route رو تغییر بدیم. پس با ما همراه باشید تا کد بالا رو Refactor کنیم.

React-Router 4 یک API به نام match رو در اختیارتون قرار میده. شئ match زمانی ساخته میشه که مسیر router با آدرس مرورگر مطابقت داشته باشه. شئ match تعدادی ویژگی یا property داره که اول در مورد اونا که خیلی باهاشون آشنا هستید، توضیح خواهم داد:

  • match.url : این ویژگی url فعلی مرورگر رو بصورت رشته در اختیارتون قرار میده
  • match.path : این ویژگی مسیر مربوط به Route رو بصورت رشته در اختیارتون قرار میده
  • match.params : یک شئ هست که مقادیری که در url قرار دارد رو در اختیار شما قرار میده

شما از طریق props.match میتونین به این قابلیت دسترسی داشته باشید. پس قدم به قدم میخوایم کد بالا رو Refactor کنیم. در ابتدا در کامپوننت Courses از match برای Link ها استفاده میکنیم. بصورت زیر:

خروجی رو در مرورگر تست کنید، خواهید دید که همانند گذشته کار خواهند کرد. خب حالا از match.path در مسیرها نیز استفاده میکنیم. بصورت زیر:

باز هم اگر تست کنید میبینید که مسیرها به خوبی کار میکنند. در آخر شما میتونین 3 خط برای تعریف Route رو ادغام کرده و با یک خط کد کار همه اونا رو انجام بدین. بصورت زیر:

همونطور که میبینید از match.params استفاده کردیم. این ویژگی یک شئ هست که اطلاعات موجود در URL رو بصورت کلید و مقدار در اختیارتون قرار میده. در تعریف مسیر یک :course قرار دادیم و مشخص کردیم که مسیر ما یک پارامتر بنام course رو قبول میکنه. حالا مثلا وقتی مسیر /courses/technology میشه، این مسیر technology رو در پارامتر course قرار میده و شما میتونین با استفاده از match.params.course به اون دسترسی داشته باشید.

به همین راحتی.

نحوه احراز هویت برای یک مسیر در React-Router

زمانی که دارید یک اپلیکیشن رو توسعه میدید، سناریوهایی پیش میاد که باید مسیرهایی رو از دسترسی عموم خارج کنیم و تحت شرایط خاصی اونا رو به کاربر نمایش بدیم. بیشتر مواقع فقط کاربرانی که احراز هویت شدند میتونن این مسیرهای محافظت شده رو مشاهده کنند.

در نسخه قبلی React-Router که نسخه 3 بود، Route protection بصورت زیر انجام میشد:

همونطور که میبینید Route یک props بنام onEnter داشت و میتونستین یک متد برای اون قرار بدین و هر کس که میخواست وارد اون بشه، این متد اجرا میشد و اگر true برگشت میداد میتونست وارد بشه و در غیر اینصورت اجازه ورود به اون مسیر رو نداشت.

در نسخه 4 مربوط به React-Router نحوه انجام این کار فرق کرده و در ادامه میخوام در مورد اون توضیح بدم. در ابتدا در فایل App.js سه کامپوننت با نام‌های Public و Private و Login به وجود میارم.

در مثال بالا همونطور که از اسم کامپوننت و مسیرها مشخص هست، مسیر public رو همه میتونن دسترسی داشته باشند ولی مسیر private رو فقط افرادی که در سایت Login هستند میتونین وارد بشند. در ادامه قصد داریم اگر کسی Login نبود و قصد وارد شدن در صفحه Private رو داشت، اون رو به مسیر login هدایت کنیم.

در کد بالا فعلا هیچ محدودیتی قرار داده نشده و چه Login باشیم و چه نه میتونیم وارد همه مسیرها بشیم. حالا میخوایم برای مسیر private محدودیت قرار بدیم. React-Router نسخه 4 از روش Declarative استفاده میکنه و برای اینکار میتونیم یک کامپوننت به نام SecretPath بسازیم که بتونیم از اون برای احراز هویت component های مورد نظرمون استفاده کنیم. خود React-Router چنین component ای رو در اختیارتون قرار نمیده و خودتون باید متناسب با نیازتون اون رو به وجود بیارید.

فرض کنید که یک AuthService داریم که وظیفش اینه که مشخص کنه که کاربر Login هست یا خیر. در این مثال فرض کنید که یک شئ بصورت زیر باشه:

همونطور که میبینید یک ویژگی بنام isAuthenticated داره و در حالت اولیه برابر با false هست و 2 متد authenticate و logout داره که در اینجا از اونا برای شبیه‌سازی login و logout کردن استفاده میکنیم.

خب حالا کامپوننت SecretRoute رو نیز به وجود میاریم. بصورت زیر:

همونطور که میبینید در ورودی این کامپوننت از Rest operator استفاده کردیم و ویژگی component رو از استخراج کردیم و اون رو به Component تغییر نام دادیم و بقیه ویژگی‌های موجودی در props رو درون متغیر rest قرار دادیم. SecretRoute یک مسیر عادی یا همون Route رو به وجود میاره که ویژگی‌های rest رو برای اون قرار میده و از render props نیز برای تصمیم‌گیری استفاده میکنه.

درون render props اگر کاربر login باشه و مقدار isAuthenticated برابر با true باشه، Component مورد نظر render میشه و در غیر اینصورت با استفاده از کامپوننت Redirect کاربر رو به صفحه Login ارسال میکنیم. کامپوننت Redirect مربوط به ابزار react-router-dom هست و باید اون رو وارد پروژه کنید.

پس تا اینجای کار کل کدهای موجود در فایل App.js بصورت زیر خواهد بود:

حالا اگر خروجی رو در مرورگر مشاهده کنید و بر روی لینک private کلیک کنید، خواهید دید که وارد اون نمیشید و مستقیما به مسیر login هدایت میشید. به همین راحتی.

خب حالا میخوام یک قدم جلوتر برم و کاری کنیم که کاربر بتونه مثلا واقعا login کنه. برای اینکار کامپوننت Login رو بصورت زیر تغییر میدم:

همونطور که میبینید این کامپوننت رو بصورت Class component در آوردیم چون میخواستیم از State درون اون استفاده کنیم. همونطور که میبینید یک متد بنام login تعریف کردیم و در اون از AuthService استفاده کردیم و کاربر رو سمت کلاینت Login میکنیم و با اینکار به نوعی فرآیند ورود رو شبیه‌سازی کرده‌ایم. بعد از اینکه کاربر در سایت login میشه، اون رو به همون صفحه‌ای که میخواسته بره و بلاک شده، برگشت میدیم.

این رفتار در بیشتر سایتها هست و زمانی که میخواید وارد یک صفحه خصوصی بشید، اگر login نباشید به صفحه login هدایت میشید و بعد از login شدن هم به همون مسیر خصوصی هدایت میشید. شما هم سعی کنید این رفتار رو در سایتتون پیاده‌سازی کنید.

حالا باید props های مربوط به کامپوننت Redirect در SecretPath رو نیز تغییر بدیم. بصورت زیر:

همونطور که میبینید برای ویژگی to یک شئ رو قرار دادیم. در ویژگی state مشخص کردیم که از کدام صفحه وارد login شدیم و با استفاده از اون میتونیم متوجه میشیم که بعد از login شدن باید وارد کدام صفحه بشیم.

حالا اگر خروجی رو ببینید و بر روی لینک private کلیک کنید، وارد مسیر login میشید و اگر login کنید مجددا به مسیر private باز خواهید گشت.

تقریبا این مثال تکمیل شده ولی بهتره که یک دکمه برای logout کردن هم قرار بدیم. برای اینکار یک کامپوننت جدید بنام AuthStatus میسازم و کدهای زیر رو در اون قرار میدم:

همونطور که میبینید در کد بالا از withRouter و history.push استفاده کردیم. withRouter یک higher-order component هست که اون رو از react-router-dom وارد پروژه میکنیم و به React این امکان رو میده که زمانی که مسیر URL عوض میشه، کامپوننت re-render بشه. یک راه دیگه برای Redirect کردن در React-Router استفاده از history.push هست.

پس در کامپوننت AuthStatus اگر login باشیم بهمون خوش‌آمد میگه و یک دکمه بنام Sign out وجود داره که میتونیم با کلیک بر روی اون log out بشیم و به صفحه اصلی یا / هدایت میشیم.

پس کل کدهای App.js در نهایت بصورت زیر خواهند بود:

حالا اگر خروجی این کد رو ببینید، میتونین وارد و خارج بشید و بین مسیرها جابجا بشید.

پس همونطور که دیدید React-Router برای هر کاری که فکرشو بکنیم امکانات در اختیارمون قرار داده و میتونیم به راحتی برای مسیرهای مورد نظرمون محدودیت قرار بدیم و دیگه لازم نیست در هر Component چک بشه که کاربر Login هست یا خیر.

در قسمت بعد اطلاعات بیشتری در مورد React-Router در اختیارتون قرار میدیم و بقیه موارد رو بهتون آموزش میدم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
7Learn Experts
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :