پیاده‌سازی Static RBAC در React

---
name: "static-rbac-react"
description: "Role و Permission را در React مدل کن، Route و Component را یکدست محافظت کن و دسترسی سمت Client را بدون اشتباه‌گرفتن آن با Authorization سرور تست کن."
---

# پیاده‌سازی Static RBAC در React

این Skill را زمانی به کار ببر که برنامه React مجموعه ثابتی از Role و Permission دارد و باید Navigation، Route و Actionهای Component را کنترل کند.

## مرز امنیت

RBAC سمت Client فقط لایه نمایش و Navigation است. Server باید تمام عملیات و Resourceهای محافظت‌شده را مجوزسنجی کند. مخفی‌کردن UI را کنترل امنیتی ندان.

## مدل Permission

نام Permission را براساس قابلیت بنویس، نه نام صفحه:

```ts
type Role = "admin" | "editor" | "viewer";
type Permission = "article.read" | "article.create" | "article.publish";

const rolePermissions: Record<Role, readonly Permission[]> = {
  admin: ["article.read", "article.create", "article.publish"],
  editor: ["article.read", "article.create"],
  viewer: ["article.read"],
};
```

یک منبع Policy داشته باش و Helperهای کوچکی مانند `can(permission)` و `canAny(permissions)` ارائه کن.

## روند کار

1. Actionهای محافظت‌شده را فهرست و واژگان Permission را با قرارداد Backend هماهنگ کن.
2. Roleها را به‌صورت کامل به Permissionها نگاشت کن.
3. Role کاربر را Normalize کن و Role نامعتبر یا غایب را Deny کن.
4. Route Guard را با وضعیت‌های Loading، Unauthenticated و Unauthorized جدا بساز.
5. Actionهای Component را با همان Helper مرکزی کنترل کن.
6. میان Hide و Disable آگاهانه انتخاب کن؛ برای حالت Disable دلیل و راه دریافت دسترسی را توضیح بده.
7. Deep Link و Navigation مرورگر را با منوی قابل مشاهده هماهنگ نگه دار.
8. هر Role، ورود مستقیم با URL، تغییر Session و پاسخ Denied از API را تست کن.

مقایسه پراکنده `user.role === "admin"` نساز، Permission را از Label UI استنباط نکن، هنگام بارگذاری محتوای محافظت‌شده را Flash نکن و Redirect بی‌پایان ایجاد نکن. در Review، تکرار Policy، Guard ناسازگار و نبود کنترل Server را جداگانه گزارش کن.