परिचय

प्राधिकरण किसी भी वेब एप्लिकेशन का एक महत्वपूर्ण पहलू है, जो यह सुनिश्चित करता है कि उपयोगकर्ताओं के पास केवल उन सुविधाओं और डेटा तक पहुंच है जिनके साथ उन्हें बातचीत करने की अनुमति है। CASL ("क्षमता-आधारित एक्सेस कंट्रोल" के लिए खड़ा है) इस तर्क को लचीले और घोषणात्मक तरीके से संभालने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है। इस लेख में, हम CASL को रिएक्ट एप्लिकेशन के साथ एकीकृत करने के तरीके के बारे में जानेंगे, जो आपको प्रभावी प्राधिकरण लागू करने के लिए उपकरण प्रदान करेगा।

आवश्यक शर्तें

एकीकरण में उतरने से पहले, आपको निम्नलिखित से परिचित होना चाहिए:

• प्रतिक्रिया की बुनियादी समझ।
• रिएक्ट में राज्य प्रबंधन से परिचित।
• जावास्क्रिप्ट ईएस6 का बुनियादी ज्ञान।

चरण 1: CASL की स्थापना

npm इंस्टॉल @casl/क्षमता @casl/react

चरण 2: क्षमताओं को परिभाषित करना

क्षमताएं परिभाषित करती हैं कि उपयोगकर्ता विशेष संसाधनों पर क्या कार्य कर सकता है। आइए एक क्षमता उदाहरण बनाकर शुरुआत करें।

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 को रिएक्ट के साथ एकीकृत करना

अपने रिएक्ट घटकों में इन क्षमताओं का उपयोग करने के लिए, आप अपने ऐप में क्षमता उदाहरण प्रदान करने के लिए एक संदर्भ बना सकते हैं।

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: घटकों की सुरक्षा करना

अब जब आपने संदर्भ सेट कर लिया है, तो आप @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 को रिएक्ट के साथ एकीकृत करना आपके अनुप्रयोगों में प्राधिकरण को प्रबंधित करने का एक साफ और घोषणात्मक तरीका प्रदान करता है। क्षमताओं को परिभाषित करके और कैन घटक का उपयोग करके, आप आसानी से नियंत्रित कर सकते हैं कि उपयोगकर्ता क्या देख सकते हैं और क्या कर सकते हैं, जिससे आपके ऐप की सुरक्षा और उपयोगकर्ता अनुभव दोनों में सुधार होगा।