يعد التحكم في الوصول المستند إلى الأدوار (RBAC) ميزة مهمة في تطبيقات الويب الحديثة، مما يتيح للمسؤولين إدارة أذونات المستخدم بناءً على أدوارهم داخل النظام. يتضمن تنفيذ RBAC في تطبيق Next.js بعض الخطوات الأساسية: تحديد الأدوار والأذونات، ودمجها مع المصادقة، وفرض التحكم في الوصول في تطبيقك. سيرشدك هذا الدليل خلال عملية إضافة ترخيص RBAC إلى تطبيق Next.js.

1. فهم RBAC

يعد التحكم في الوصول المستند إلى الأدوار (RBAC) طريقة لتقييد الوصول إلى النظام للمستخدمين المصرح لهم بناءً على أدوارهم. تحدد الأدوار مجموعة من الأذونات، ويتم تعيين أدوار للمستخدمين تمنحهم الأذونات المرتبطة. على سبيل المثال، في أحد التطبيقات، قد يكون لديك أدوار مثل المسؤول والمحرر والعارض، ولكل منها مستويات وصول مختلفة.

2. إعداد مشروع Next.js الخاص بك

إذا لم تكن قد قمت بذلك بالفعل، فابدأ بإنشاء مشروع Next.js:

npx create-next-app@latest my-rbac-app
cd my-rbac-app

3. إضافة المصادقة

قبل تنفيذ RBAC، تحتاج إلى آلية مصادقة لتحديد المستخدمين. لا يأتي Next.js مزودًا بمصادقة مضمنة، لذا يمكنك استخدام مكتبات مثل NextAuth.js أو Firebase Authentication. فيما يلي نظرة عامة مختصرة على إعداد NextAuth.js:

1. تثبيت NextAuth.js:

   npm install next-auth

1. إنشاء مسار واجهة برمجة التطبيقات للمصادقة:

في دليل الصفحات/واجهة برمجة التطبيقات (api)، قم بإنشاء ملف باسم [...nextauth].js:

   // pages/api/auth/[...nextauth].js
   import NextAuth from 'next-auth';
   import CredentialsProvider from 'next-auth/providers/credentials';

   export default NextAuth({
     providers: [
       CredentialsProvider({
         async authorize(credentials) {
           // Here you should fetch and verify user credentials from your database
           const user = { id: 1, name: 'John Doe', email: '[email protected]', role: 'admin' };
           if (user) {
             return user;
           } else {
             return null;
           }
         }
       })
     ],
     pages: {
       signIn: '/auth/signin',
     },
     callbacks: {
       async session({ session, token }) {
         session.user.role = token.role;
         return session;
       },
       async jwt({ token, user }) {
         if (user) {
           token.role = user.role;
         }
         return token;
       }
     }
   });

1. إضافة صفحة تسجيل الدخول:

قم بإنشاء صفحة تسجيل دخول بسيطة على الصفحات/auth/signin.js:

   // pages/auth/signin.js
   import { signIn } from 'next-auth/react';

   export default function SignIn() {
     return (
       

         
Sign In
          signIn('credentials', { redirect: false })}>
           Sign In
         
       
     );
   }

4. تحديد الأدوار والأذونات

حدد الأدوار والأذونات في تطبيقك. يمكنك القيام بذلك في ملف تكوين مركزي أو مباشرة داخل التعليمات البرمجية الخاصة بك. فيما يلي مثال بسيط لتحديد الأدوار والأذونات:

// lib/roles.js
export const ROLES = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer',
};

export const PERMISSIONS = {
  [ROLES.ADMIN]: ['view_dashboard', 'edit_content', 'delete_content'],
  [ROLES.EDITOR]: ['view_dashboard', 'edit_content'],
  [ROLES.VIEWER]: ['view_dashboard'],
};

5. تنفيذ RBAC

ادمج منطق RBAC في صفحات Next.js ومسارات واجهة برمجة التطبيقات (API). إليك كيفية تقييد الوصول بناءً على الأدوار:

1. حماية الصفحات:

إنشاء مكون عالي الترتيب (HOC) لتغليف صفحاتك المحمية:

   // lib/withAuth.js
   import { useSession, signIn } from 'next-auth/react';
   import { ROLES } from './roles';

   export function withAuth(Component, allowedRoles) {
     return function ProtectedPage(props) {
       const { data: session, status } = useSession();

       if (status === 'loading') return 
Loading...
;
       if (!session || !allowedRoles.includes(session.user.role)) {
         signIn();
         return null;
       }

       return ;
     };
   }

استخدم هذا المخصص في صفحاتك:

   // pages/admin.js
   import { withAuth } from '../lib/withAuth';
   import { ROLES } from '../lib/roles';

   function AdminPage() {
     return 
Welcome, Admin!
;
   }

   export default withAuth(AdminPage, [ROLES.ADMIN]);

1. حماية مسارات واجهة برمجة التطبيقات:

يمكنك أيضًا حماية مسارات واجهة برمجة التطبيقات (API) عن طريق التحقق من أدوار المستخدم:

   // pages/api/protected-route.js
   import { getSession } from 'next-auth/react';
   import { ROLES } from '../../lib/roles';

   export default async function handler(req, res) {
     const session = await getSession({ req });

     if (!session || !ROLES.ADMIN.includes(session.user.role)) {
       return res.status(403).json({ message: 'Forbidden' });
     }

     res.status(200).json({ message: 'Success' });
   }

6. الاختبار والتكرير

تأكد من إجراء اختبار شامل لتطبيق RBAC الخاص بك للتحقق من تطبيق الأذونات والأدوار بشكل صحيح. اختبر الأدوار المختلفة للتأكد من أن قيود الوصول تعمل كما هو متوقع.

خاتمة

يتضمن دمج التحكم في الوصول المستند إلى الدور (RBAC) في تطبيق Next.js إعداد المصادقة وتحديد الأدوار والأذونات وفرض هذه الأدوار عبر التطبيق الخاص بك. باتباع الخطوات الموضحة في هذا الدليل، يمكنك إدارة وصول المستخدم بشكل فعال والتأكد من أن تطبيق Next.js الخاص بك آمن وسهل الاستخدام.
كاميرا عربة SIM 4G