Introducción

La autorización es un aspecto crítico de cualquier aplicación web, ya que garantiza que los usuarios solo tengan acceso a las funciones y datos con los que pueden interactuar. CASL (significa "Control de acceso basado en capacidades") es una biblioteca de JavaScript popular para manejar esta lógica de una manera flexible y declarativa. En este artículo, explicaremos cómo integrar CASL con una aplicación React, brindándole las herramientas para implementar una autorización efectiva.

Requisitos previos

Antes de sumergirte en la integración, debes estar familiarizado con lo siguiente:

• Comprensión básica de React.
• Familiaridad con la gestión estatal en React.
• Conocimientos básicos de JavaScript ES6.

Paso 1: configurar CASL

instalación npm @casl/capacidad @casl/react

Paso 2: Definir habilidades

Las habilidades definen qué acciones puede realizar un usuario en recursos particulares. Comencemos creando una instancia de habilidad.

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;

En este ejemplo, definimos dos habilidades:

• Todos los usuarios pueden leer artículos.
• Los usuarios solo pueden actualizar los artículos que hayan escrito.

Paso 3: Integrar CASL con React

Para usar estas habilidades en tus componentes de React, puedes crear un contexto para proporcionar la instancia de habilidad en toda tu aplicación.

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

Paso 4: Proteger los componentes

Ahora que ha configurado el contexto, puede proteger sus componentes utilizando el componente Can proporcionado por @casl/react.

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

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

  return (
    

      
{article.title}
      
{article.content}

      Edit Article
      
  );
}

Aquí, el botón "Editar artículo" solo será visible si el usuario tiene permiso para actualizar el artículo.

Paso 5: Manejo del acceso no autorizado

CASL también puede ayudar a gestionar lo que sucede cuando un usuario intenta una acción no autorizada. Esto se puede hacer verificando las capacidades en los controladores de eventos o llamadas API.

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

  // proceed with editing logic
};

Conclusión

La integración de CASL con React proporciona una forma limpia y declarativa de gestionar la autorización en sus aplicaciones. Al definir capacidades y utilizar el componente Can, puedes controlar fácilmente lo que los usuarios pueden ver y hacer, mejorando tanto la seguridad como la experiencia del usuario de tu aplicación.