https://virgool.io/feed/@jvdbabaei زندگی من خلاصه میشه تو یک جمله، کد و کافی ☕️ fa 2026-06-16 19:50:46 https://files.virgool.io/upload/users/68587/avatar/Yp4Mqu.jpg?height=120&width=120 https://virgool.io/@jvdbabaei https://virgool.io/jshints/%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-private-routes-%D8%AF%D8%B1-react-klimwuxo711y تفکیک مسیر خصوصی از عمومی در 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 Routerroutes. jsبرای آشنایی بیشتر با React Router به داکیومنت آن در پایین مقاله سر بزنید .پیاده سازی کامپوننت PrivateRoutePrivateRoute. jsدر اینجا ما یه تابع دارم که کارش اینه که از useAuth سوال میکنه آقا جان کاربر توکن داره یا نه ؟! به هنگامی که isLoggeIn پاسخ مثبت بهش برگردونه Route مورد نظر رو بارگذاری میکنه و اگه پاسخ منفی باشه کاربر رو ریدایرکت میکنه به آدرس "Login/" که همون صفحه لاگین ما هستش.پیاده سازی کامپوننت App به همراه RouterApp. jsتمامی route های خصوصی یک مشخصه به نام private دارن که boolean هست از روی این قضیه به راحتی route هامون رو از همه دیگه تفکیک می‌کنیم تنها با یک شرط . حالا دیگه یه App.js تر و تمیز توی پروژه هامون داریم :)) https://media.giphy.com/media/B0vFTrb0ZGDf2/giphy.gif چکیدهدر این مقاله راجع به نحوه پیاده سازی Private Route ها در React صحبت کردیم و یه روش خفن و تر و تمیز رو باهم پیاده کردیم که به وسیله اون به راحتی دسترسی کاربران را به Route هایی که نیازمند احراز هویت هستن محدود می‌کنیم .دمو و سورس کد https://codesandbox.io/embed/private-route-react-8dovj?file=/src/App.%20js پیوند ها : https://reactrouter.com/web/guides/quick-start https://reactjs.org/docs/context.html خوشحال میشم نظرات و پشنهادتون رو داشته باشم و امیدوارم لذت برده باشید.موفق و پیروز باشید... محمدجواد آقابابائی محمدجواد آقابابائی Sat, 25 Jul 2020 15:06:59 +0430 https://virgool.io/jshints/use-asyncstorage-in-react-native-jihjmdioorhx کار با AsyncStorage در ReactNativeAsyncStorage چیست ؟ به زبان ساده میشه گفت ، ذخیره داده ها بر روی دستگاه به صورت لوکال و واکشی آن هامن تقریبا دوس دارم توضیحات مختصر ، کوتاه و اما مفید بدم که شما در کمترین زمان ممکن درک کنید و صحبت های زیاد من هم سرتون رو درد نیاره :)خب بریم یکم بیشتر راجب AsyncStorage براتون توضیح بدم تا کاملا درک کنید که چی هست اصن ! من یه اسمی گذاشتم برای AsyncStorage که بهش میگم ذخیره سازی کلیدی ، یعنی اینکه یک سری داده رو ما با کلید منحصر به فرد خودشون به سمت AsyncStorage ارسال میکنیم و اون هم برای ما در حافظه گوشی های اندرویدی یا ios ذخیره میکنه و هنگامی که به این داده ها نیاز داشتیم فقط کافیه کلید منحصر به فرد اون داده رو صدا بزنیم به فرض مثال 'TOKEN-KEY' ، همین جا به یه سری نکات مهم اشاره کنم:ذخیره سازی کلیدی (AsyncStorage) برای داده های بزرگ پیشنهاد نمیشه پس در نظر داشته باشین که برای داده های کوتاه گزینه خیلی مناسبی هست و در کمترین زمان ممکن داده را در اختیار ما قرار میده یا برامون ذخیره میکنه .داده های ذخیره شده با بستن اپلیکیشن یا ریست کردن دستگاه از بین نخواهد رفت تنها با پاک شدن اپلیکیشن یا clear data کردن توسط کاربر اطلاعات از دست خواهند رفت .خب اگه هنوزم براتون پیچیده هست این قضیه و شما یک توسعه دهنده وب هستید میخوام بهتون بگم که AsyncStorage تقریبا LocalStorage خودمون هستش و برای مثال به ما در احراز هویت کاربر کمک میکنه. یکم بیشتر بخوام توضیح بدم فرض کنید ما نیازمند این هستیم یک سری توضیحات به کاربر برای اولین بار نشان دهیم و دیگر به آن یادآوری نکنیم و خب این کاربر رو اذیت میکنه که هر بار این توضیحات تکراری رو ببینه ، یکی از روش های پیاده سازی AsyncStorage هست . خب فکر کنم وقتشه یکم دست به کد بشیم :)من دو حالت استفاده از AsyncStorage رو داخل کد بهتون نمایش میدم که عبارت هستند از :1.ذخیره داده ها با کلید منحصر به فردذخیره داده ها با کلید منحصر به فرد2.واکشی داده ها با کلید منحصر به فردواکشی داده ها با کلید منحصر به فرددر ضمن متد های دیگری هم برای استفاده از AsyncStorage وجود داره که تعدادی از اون ها رو در زیر براتون بیان میکنم و باقی موارد را می توانید با مراجعه به لینک در پیوند بدست آورید .ذخیره داده ها با کلید منحصر به فردواکشی داده ها با کلید منحصر به فردپاکسازی تمامی کلید ها و داده های آن هاپاکسازی یک کلید خاص به همراه داده ی آنواکشی تمامی کلید های ذخیره شده و داده هاتوجه داشته باشید که برای استفاده از AsyncStorage نباید آن را به این صورت import نمایید import { AsyncStorage } from 'react-native';و باید به حالت پایین import نمایید زیرا مدل قبل منسوخ شده می باشد .import AsyncStorage from '@react-native-community/async-storage';پیوند : https://reactnative.dev/docs/asyncstorage خوشحال میشم نظرات و پشنهادتون رو داشته باشم و امیدوارم لذت برده باشید موفق و پیروز باشید . محمدجواد آقابابائی محمدجواد آقابابائی Mon, 09 Mar 2020 04:15:52 +0330