https://virgool.io/feed/@alisajadih fa 2026-04-15 10:06:36 https://files.virgool.io/upload/users/62992/avatar/2rZEQ3.png?height=120&width=120 https://virgool.io/@alisajadih https://virgool.io/@alisajadih/%DA%86%D8%B7%D9%88%D8%B1-%DB%8C%DA%A9-api-%D8%AA%D9%85%DB%8C%D8%B2-%D8%A8%D8%B1%D8%A7%DB%8C-rbac-%D8%AF%D8%B1-react-%D8%AF%D8%A7%D8%B4%D8%AA%D9%87-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-twup6gzrtsns تو این مقاله میخوام راجب این صحبت کنم که role base access control چقد ساده میتونه تو فرانت‌اند کنترل بشه.با یه مثال میخوام قضیه رو توضیح بدم و flow کلی rbac رو بگمتو حالت خیلی عادی و دیدگاه impretive یه همچین چیزی داریم:تو عکس بالا اگه عمیق تر بهش فک کنیم و بیاییم ببینیم آیا این if و else نوشتن فقط به همین کامپوننت خلاصه میشه؟یا نه؟ و موضوع خیلی مهمی که وجود داره اینه که ممکنه المان های خیلی کوچیک هم role base بخوان نمایش داده بشن، اونموقع برای هر المان یه همچین چیزی باید بنویسیم به تعداد role ها.تو rbac قطعا هر role یکسری permission هایی داره. منظورم اینه یک role مثل admin میتونه مثلا یک محصول تو پنل اضافه کنه ولی یوزر عادی نمیتونه. پس قاعدتا نباید این feature برای یوزر عادی نشون داده بشه. یه قراردادی تو نحوه نوشتن permission ها وجود داره که اون به این شکله:[feature]:[action]تو مثال بالا admin در واقع میتونه product:create داشته باشه و یا اصطلاحا میتونه perform کنه ولی یوزر عادی نمیتونه. پس میایم یک obj استاتیک (ممکنه بسته به نیاز داینامیک باشه و از سمت سرور بیاد)مینویسیم به این شکل:حالا اینکار چه فایده‌ای داره؟ فایدش اینه که با اینکار میتونیم بگیم هر المان داخل صفحه یه access level ای داره و به جای اینکه بیاییم مستقیما عملیات شرط گذاری رو برا المان ها بنویسیم میاییم میگیم اگر فلان یوزر با فلان role همچین permission ای داشت حالا این رو رندر کن. در واقع یه همچین ساختاری:شاید بگید الان چه فرقی کرد! زشت تر شد که! درسته ولی ما با این میتونیم یه لایه abstract ای بیاریم روی کار و این وظیفه چک کردن رو بدیم به یه کامپوننت دیگه! از طرفی سپردن permission ها به المان های صفحه باعث میشه بتونیم به هر المان چندین permission بدیم و چک کنیم برای نمایش این المان user حتما باید permission هاشو داشته باشه. خیلی خفن طور میاییم و کامپوننت Can رو معرفی میکنیم:اون TPermission چیز خاصی نیست و صرفا یه تایپیه که کل permission هارو تو خودش داره.این کامپوننته can یه پراپ perform میگیره که یه آرایه‌ای از permission هاست. که میگه این user ای که تو اپ هست باید تمام permission هایی که این کامپوننت برای رندر شدن داره رو باید داشته باشه.مثلا اگر آرایه perform به صورت ["product:create","product:remove"] بود، باید user هم چنین permission هایی داشته باشه حالا اینکار چک کردن رو تابعی به اسم check که تو can هم استفاده شده، میکنه:حالا میتونیم اینطور استفادشون کنیم:و داشتن یه کاستوم هوک هم کمک میکنه المان های کوچیک زیاد درگیر can نشن:و طریقه استفادش هم :بسیار عالی. این api رو من خیلی کلی توضیح دادم و خب بسته به نیاز پروژه میتونه داینامیک تر بشه مثلا میتونیم permission های داینامیک اضافه کنیم تو اون ابجکت role.مثلا یک user فقط میتونه پست های خودش رو ادیت بکنه نه پستای بقیه رو بنابراین پست ها باید داینامیک مدیریت بشن.و خب خوبی این روش اینه از شر مزاحمت های اون if else ها تو همه کامپوننت ها راحت میشیم و از طرفی یه لاجیک خیلی ساده و منعطف داریم که میتونه توانایی های خودشو تو code base های بزرگ نشون بده.خیلی ممنون. خوشحال میشم نظراتتونو بگید :) Ali Sajadi Ali Sajadi Tue, 07 Jul 2020 01:32:58 +0430 https://virgool.io/iran-react-community/%DA%A9%D8%A7%D9%86%D9%81%DB%8C%DA%AF-context-%D8%A8%D8%A7-typescript-esg7ctaphwmb چند وقتیه که به صورت مستمر پیگیر ری‌اکتم . تا حالا دنبال تایپ‌اسکریپت نرفته بودم و تا اینکه دلو زدم به دریا و رفتم سراغش . در کمال ناباوری دیدم چقد خفنه و چقد کد رو تمیز میکنه . تصمیم گرفتم یه مقاله بنویسم و یه توضیحاتی راجبه کانفیگ کانتکست با تایپ‌اسکریپت بدم و باهم یه todolist ساده با قابلیت اضافه کردن todo بزنیم .خب اول از همه باید ts رو به پروژه اضافه کنیم با دستور npm install --save typescript @types/node @types/react @types/react-dom @types/jest خب میریم سراغه تعریف type و interface ها . میتونید همه رو تو یه فایلی مثلا به اسمه types.ts بریزید و یا تو هر کامپوننت اینترفیس تعریف کنید. حالا من همرو جدا کردم تو یه فایل به اسمه types.ts : خب یک فایلی به نام Context.tsx میسازیم و توی اون کانتکستمونو قرار میدیم :‌همونطور که میبینید تایپ کانتکست یه آرایه ای از اینترفیس ITodo هست . بنابراین با اینکار provider و consumer هم تایپشون یکی میشه . خب حالا initialState چیه ؟ اینه : قبله این که بریم سراغ reducer یکسری interface برای اکشن ها تو فایله types.ts ست میکنیم :همونجور که معلومه یه اینترفیس پایه برای اکشن در نظر گرفتیم و هر اکشن با توجه به payload از اون extend میشه . و در آخر یه تایپ تعریف میکنیم که همه اکشن هایی که داریم رو با هم or میکنه (حالا اینجا یکی بیشتر نیس و اونم ContextAddTodoAction هست ) خب میریم سراغه همون فایله Context.tsx و شرو میکنیم به نوشتن reducer و provider از useReducer اینجور استفاده میکنیم :‌تو قسمته React.Reducer ، دوتا پارامتر برا تایپ داریم ، اولی تایپه استیتمون هست که یه آرایه از ITodo هاست و دومی هم تایپ اکشن هامونه ک قبلا با هم or شده بودن . و reducer هم به این شکل:و provider نیز : خب اینجا یه مشکلی پیش میاد و اونم اینه که وقتی ما تایپه اولیه کانتکست رو گذاشتیم [ ]ITodo ، تایپ provider هم باید [ ]ITodo باشه . ولی همونجور ک میبینید تایپ value یه آبجکته .برای حل این مشکل کافیه تایپه کانتکستمونو عوض کنیم و این ریختی شه :‌تایپه کانتکست شد یه آبجکت که یه todos داره و یه dispatch . ورودی dispatch یه action هست و این تابع چیزی بر نمیگردونه void و مقدار اولیش هم یه فانکشن خالی میذاریم . حالا فقط کافیه context رو export کنیم :‌تمامم !!! Ali Sajadi Ali Sajadi Sun, 22 Dec 2019 22:00:36 +0330