پیاده سازی Private Routes در React

چند وقت پیش داشتم با همکارم صحبت می‌کردم و ازش سوال کردم که ببینم چطوری پروژه های ری‌اکت رو Route بندی میکنه ؟! دقیقا راه اشتباهی که خودم قبلا میرفتم رو انتخاب کرده بود چند نفر دیگه رو هم دیده بودم که اشتباه میزدن ، بنابراین تصمیم گرفتم راجب این قضیه بنویسم و با بقیه به اشتراک بذارم .

اول از همه یه نکته ریز رو بهش اشاره کنم برای این مقاله یه سری پیش نیاز ها لازمه که ذکر میکنم خدمتتون
- تسلط کافی به react router
- آشنایی با یکی از state management ها

مرحله اول

اول از همه نیازمند یک پروژه خام ری‌اکت هستیم.

برای پیاده سازی نیازمند React Router هستیم ، پس این رو هم به پروژه اضافه می‌کنیم.

npm install react-router-dom
yarn add react-router-dom

تمامی کامپوننت های استفاده شده در مقاله پیوندشون آخر مقاله قرار داده شده !

قراره که یه داشبورد ساده با هم پیاده کنیم که کاربر قبل از لاگین اجازه دسترسی به پنل رو نداره و پس از لاگین این اجازه رو پیدا میکنه خب تا اینجای کار فکر کنم متوجه private route شده باشین ، داشبورد یک کامپوننت خصوصی به حساب میاد یا بهتر بگم همون private route خودمون :)

خب بیاین دایرکتوری پروژه رو با هم ایجاد کنیم و استارت کار رو بزنیم .

برای تشخیص وضعیت لاگین کاربر من از State Management و Hooks استفاده کردم شما هم میتونین نسبت به نیاز خودتون مثل من یا با هر روشی که دوست دارین این قضیه رو هندل کنین.

مرحله دوم

آماده سازی React Router

برای آشنایی بیشتر با React Router به داکیومنت آن در پایین مقاله سر بزنید .

پیاده سازی کامپوننت PrivateRoute

در اینجا ما یه تابع دارم که کارش اینه که از useAuth سوال میکنه آقا جان کاربر توکن داره یا نه ؟! به هنگامی که isLoggeIn پاسخ مثبت بهش برگردونه Route مورد نظر رو بارگذاری میکنه و اگه پاسخ منفی باشه کاربر رو ریدایرکت میکنه به آدرس "Login/" که همون صفحه لاگین ما هستش.

پیاده سازی کامپوننت App به همراه Router

تمامی route های خصوصی یک مشخصه به نام private دارن که boolean هست از روی این قضیه به راحتی route هامون رو از همه دیگه تفکیک می‌کنیم تنها با یک شرط . حالا دیگه یه App.js تر و تمیز توی پروژه هامون داریم :))

چکیده

در این مقاله راجع به نحوه پیاده سازی Private Route ها در React صحبت کردیم و یه روش خفن و تر و تمیز رو باهم پیاده کردیم که به وسیله اون به راحتی دسترسی کاربران را به Route هایی که نیازمند احراز هویت هستن محدود می‌کنیم .

دمو و سورس کد

پیوند ها :

خوشحال میشم نظرات و پشنهادتون رو داشته باشم و امیدوارم لذت برده باشید.

موفق و پیروز باشید...