Einführung

Autorisierung ist ein entscheidender Aspekt jeder Webanwendung und stellt sicher, dass Benutzer nur Zugriff auf die Funktionen und Daten haben, mit denen sie interagieren dürfen. CASL (steht für „Capability-based Access Control“) ist eine beliebte JavaScript-Bibliothek zur flexiblen und deklarativen Handhabung dieser Logik. In diesem Artikel erklären wir Ihnen, wie Sie CASL in eine React-Anwendung integrieren und stellen Ihnen die Tools zur Implementierung einer effektiven Autorisierung zur Verfügung.

Voraussetzungen

Bevor Sie sich mit der Integration befassen, sollten Sie mit Folgendem vertraut sein:

• Grundlegendes Verständnis von React.
• Vertrautheit mit der Zustandsverwaltung in React.
• Grundkenntnisse von JavaScript ES6.

Schritt 1: Einrichten von CASL

npm install @casl/ability @casl/react

Schritt 2: Fähigkeiten definieren

Fähigkeiten definieren, welche Aktionen ein Benutzer für bestimmte Ressourcen ausführen kann. Beginnen wir mit der Erstellung einer Fähigkeitsinstanz.

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;

In diesem Beispiel definieren wir zwei Fähigkeiten:

• Alle Benutzer können Artikel lesen.
• Benutzer können nur Artikel aktualisieren, die sie verfasst haben.

Schritt 3: CASL mit React integrieren

Um diese Fähigkeiten in Ihren React-Komponenten zu verwenden, können Sie einen Kontext erstellen, um die Fähigkeitsinstanz in Ihrer gesamten App bereitzustellen.

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);

Schritt 4: Komponenten schützen

Da Sie nun den Kontext eingerichtet haben, können Sie Ihre Komponenten mit der von @casl/react bereitgestellten Can-Komponente schützen.

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

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

  return (
    

      
{article.title}
      
{article.content}

      Edit Article
      
  );
}

Hier ist die Schaltfläche „Artikel bearbeiten“ nur sichtbar, wenn der Benutzer die Berechtigung zum Aktualisieren des Artikels hat.

Schritt 5: Umgang mit unbefugtem Zugriff

CASL kann auch dabei helfen, zu verwalten, was passiert, wenn ein Benutzer eine nicht autorisierte Aktion versucht. Dies kann durch Überprüfen der Fähigkeiten in Event-Handlern oder API-Aufrufen erfolgen.

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

  // proceed with editing logic
};

Abschluss

Die Integration von CASL mit React bietet eine saubere und deklarative Möglichkeit, die Autorisierung in Ihren Anwendungen zu verwalten. Durch das Definieren von Fähigkeiten und die Verwendung der Can-Komponente können Sie einfach steuern, was Benutzer sehen und tun können, und so sowohl die Sicherheit als auch das Benutzererlebnis Ihrer App verbessern.