إزاي تبني نظام RBAC (Role-Based Access Control) متكامل في Next.js؟

لو بتشتغل على مشروع في Next.js وعاوز تتحكم في صلاحيات المستخدمين حسب أدوارهم زي Admins و Users فأنت محتاج تبني نظام RBAC. الفكرة ببساطة هي إنك تحدد مين يقدر يعمل إيه بدل ما تكتب شروط في كل مكان 🤔

في الأول: يعني إيه RBAC؟

ببساطه هوا نظام بيحدد مين يقدر يعمل إيه بناءً على دوره في الموقع, بدل ما تفضل تكتب شروط في كل صفحة، بتحدد صلاحيات لكل دور (Role) في مكان واحد.

طيب إزاي نطبقه في Next.js؟

هنمشي مع بعض خطوه بخطوه عشان نبني RBAC كامل باذن الله…

1️⃣ هنعمل تعريف لللأدوار والصلاحيات:

📂 utils/roles.js

export const roles = {<br /><br /><br /> admin: [“create”, “edit”, “delete”, “view”],<br /><br /><br /> editor: [“edit”, “view”],<br /><br /><br /> user: [“view”],<br /><br /><br /> };

• 
  – عرفنا الأدوار اللي عندنا وكل دور معاه الصلاحيات بتاعته.
  
• 
  – كده أي حد عنده دور معين، نقدر نعرف بالظبط هو يقدر يعمل إيه.
  

2️⃣ بعد كدا هنعمل Middleware لحماية الصفحات:

📂 middleware/auth.js

import { roles } from “@/utils/roles”;<br /><br /><br /> export function checkPermission(userRole, action) {<br /><br /><br /> return roles[userRole]?.includes(action);<br /><br /><br /> }

• 
  – كتبنا Function checkPermission اللي بتشوف لو الدور عنده الصلاحية المطلوبة ولا لأ.
  
• 
  – كده بدل ما نكرر أكواد التحقق في كل صفحة بنستخدمها في أي مكان عادي.
  

3️⃣ هنستخدم RBAC في API Routes:

📂 pages/api/protected.js

import { checkPermission } from “@/middleware/auth”;<br /><br /><br /> export default function handler(req, res) {<br /><br /><br /> const userRole = req.headers[“x-user-role”];<br /><br /><br /> if (!checkPermission(userRole, “edit”)) {<br /><br /><br /> return res.status(403).json({ error: “Unauthorized” });<br /><br /><br /> }<br /><br /><br /> res.status(200).json({ message: “Access Granted!” });<br /><br /><br /> }

• • 
    – جبنا دور المستخدم من headers.
    
  • 
    – استخدمنا checkPermission عشان نعرف لو مسموح له ولا لأ.
    

لو مسموح بيرجعله Access Granted.

لو مش مسموح، بنرجّع Error 403

4️⃣ نحمي الصفحات في الـ Frontend:

📂 pages/dashboard.js

import { useEffect } from “react”;<br /><br /><br /> import { useRouter } from “next/router”;<br /><br /><br /> export default function Dashboard({ userRole }) {<br /><br /><br /> const router = useRouter();<br /><br /><br /> useEffect(() => {<br /><br /><br /> if (userRole !== “admin”) router.push(“/unauthorized”);<br /><br /><br /> }, []);<br /><br /><br /> return </p><br /><br /> <h1>لوحة التحكم</h1><br /><br /> <p>;<br /><br /><br /> }

• 
  – استخدمنا useEffect عشان أول ما المستخدم يدخل الصفحة، نشوف هو أدمن ولا لأ.
  
• 
  – لو مش أدمن، بنحوّله على صفحة “غير مسموح”.
  

وبكده بقى عندك نظام RBAC متكامل في Next.js، ينظم الصلاحيات بطريقة سهلة وآمنة,
لو عندك أي استفسار، اكتب في الكومنتات..💛