مقدمة

يعد التفويض جانبًا مهمًا لأي تطبيق ويب، مما يضمن أن المستخدمين لديهم حق الوصول فقط إلى الميزات والبيانات المسموح لهم بالتفاعل معها. CASL (ترمز إلى "التحكم في الوصول على أساس القدرة") هي مكتبة جافا سكريبت شائعة للتعامل مع هذا المنطق بطريقة مرنة وتعريفية. في هذه المقالة، سنتعرف على كيفية دمج CASL مع تطبيق React، مما يوفر لك الأدوات اللازمة لتنفيذ الترخيص الفعال.

المتطلبات الأساسية

قبل الغوص في عملية التكامل، يجب أن تكون على دراية بما يلي:

• الفهم الأساسي للرد الفعل.
• الإلمام بإدارة الحالة في React.
• المعرفة الأساسية بجافا سكريبت ES6 .

الخطوة 1: إعداد CASL

تثبيت npm @casl/القدرة @casl/react

الخطوة الثانية: تحديد القدرات

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

import { Ability } from '@casl/ability';

const defineAbilitiesFor = (user) => {
  return new Ability([
    {
      action: 'read',
      subject: 'Article',
    },
    {
      action: 'update',
      subject: 'Article',
      conditions: { authorId: user.id },
    },
  ]);
};

export default defineAbilitiesFor;

في هذا المثال، نحدد قدرتين:

• يمكن لجميع المستخدمين قراءة المقالات.
• يمكن للمستخدمين فقط تحديث المقالات التي قاموا بتأليفها.

الخطوة 3: دمج CASL مع React

لاستخدام هذه القدرات في مكونات React، يمكنك إنشاء سياق لتوفير مثيل القدرة عبر تطبيقك.

import React, { createContext, useContext } from 'react';
import { Ability } from '@casl/ability';

const AbilityContext = createContext();

export const AbilityProvider = ({ children, user }) => {
  const ability = defineAbilitiesFor(user);

  return (
    
      {children}
    
  );
};

export const useAbility = () => useContext(AbilityContext);

الخطوة 4: حماية المكونات

الآن بعد أن قمت بإعداد السياق، يمكنك حماية مكوناتك باستخدام مكون Can الذي يوفره @casl/react.

import { Can } from '@casl/react';

function Article({ article }) {
  const ability = useAbility();

  return (
    

      
{article.title}
      
{article.content}

      
        Edit Article
      
    
  );
}

هنا، لن يكون زر "تحرير المقالة" مرئيًا إلا إذا كان لدى المستخدم إذن لتحديث المقالة.

الخطوة 5: التعامل مع الوصول غير المصرح به

يمكن أن يساعد CASL أيضًا في إدارة ما يحدث عندما يحاول المستخدم القيام بإجراء غير مصرح به. يمكن القيام بذلك عن طريق التحقق من القدرات في معالجات الأحداث أو استدعاءات واجهة برمجة التطبيقات.

const handleEdit = () => {
  if (!ability.can('update', article)) {
    alert('You are not allowed to edit this article!');
    return;
  }

  // proceed with editing logic
};

خاتمة

يوفر دمج CASL مع React طريقة نظيفة ومصرحة لإدارة الترخيص في تطبيقاتك. من خلال تحديد القدرات واستخدام مكون Can، يمكنك التحكم بسهولة في ما يمكن للمستخدمين رؤيته والقيام به، مما يؤدي إلى تحسين الأمان وتجربة المستخدم لتطبيقك.