Introduction

L'autorisation est un aspect essentiel de toute application Web, garantissant que les utilisateurs n'ont accès qu'aux fonctionnalités et aux données avec lesquelles ils sont autorisés à interagir. CASL (pour « Capability-based Access Control ») est une bibliothèque JavaScript populaire permettant de gérer cette logique de manière flexible et déclarative. Dans cet article, nous expliquerons comment intégrer CASL à une application React, en vous fournissant les outils nécessaires pour mettre en œuvre une autorisation efficace.

Conditions préalables

Avant de vous lancer dans l'intégration, vous devez connaître les éléments suivants :

• Compréhension de base de React.
• Familiarité avec la gestion d'état dans React.
• Connaissance de base de JavaScript ES6 .

Étape 1 : Configuration de la CASL

npm install @casl/ability @casl/react

Étape 2 : Définir les capacités

Les capacités définissent les actions qu'un utilisateur peut effectuer sur des ressources particulières. Commençons par créer une instance de capacité.

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;

Dans cet exemple, nous définissons deux capacités :

• Tous les utilisateurs peuvent lire les articles.
• Les utilisateurs peuvent uniquement mettre à jour les articles dont ils sont les auteurs.

Étape 3 : Intégrer CASL à React

Pour utiliser ces capacités dans vos composants React, vous pouvez créer un contexte pour fournir l'instance de capacité dans toute votre application.

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

Étape 4 : Protection des composants

Maintenant que vous avez configuré le contexte, vous pouvez protéger vos composants à l'aide du composant Can fourni par @casl/react.

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

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

  return (
    

      
{article.title}
      
{article.content}

      Edit Article
      
  );
}

Ici, le bouton « Modifier l'article » ne sera visible que si l'utilisateur a l'autorisation de mettre à jour l'article.

Étape 5 : Gérer les accès non autorisés

CASL peut également aider à gérer ce qui se passe lorsqu'un utilisateur tente une action non autorisée. Cela peut être fait en vérifiant les capacités des gestionnaires d'événements ou des appels d'API.

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

  // proceed with editing logic
};

Conclusion

L'intégration de CASL à React fournit un moyen propre et déclaratif de gérer les autorisations dans vos applications. En définissant des capacités et en utilisant le composant Can, vous pouvez facilement contrôler ce que les utilisateurs peuvent voir et faire, améliorant ainsi à la fois la sécurité et l'expérience utilisateur de votre application.