Introdução

A autorização é um aspecto crítico de qualquer aplicativo da web, garantindo que os usuários tenham acesso apenas aos recursos e dados com os quais têm permissão para interagir. CASL (significa "Capability-based Access Control") é uma biblioteca JavaScript popular para lidar com essa lógica de maneira flexível e declarativa. Neste artigo, veremos como integrar CASL a um aplicativo React, fornecendo as ferramentas para implementar uma autorização eficaz.

Pré-requisitos

Antes de mergulhar na integração, você deve estar familiarizado com o seguinte:

• Compreensão básica do React.
• Familiaridade com gerenciamento de estado no React.
• Conhecimento básico de JavaScript ES6.

Passo 1: Configurando CASL

instalar npm @casl/capacidade @casl/react

Passo 2: Definindo Habilidades

As habilidades definem quais ações um usuário pode executar em recursos específicos. Vamos começar criando uma instância de habilidade.

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;

Neste exemplo, definimos duas habilidades:

• Todos os usuários podem ler artigos.
• Os usuários só podem atualizar artigos de sua autoria.

Etapa 3: Integrando CASL com React

Para usar essas habilidades em seus componentes React, você pode criar um contexto para fornecer a instância de habilidade em todo o seu aplicativo.

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

Etapa 4: Protegendo Componentes

Agora que configurou o contexto, você pode proteger seus componentes usando o componente Can fornecido por @casl/react.

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

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

  return (
    

      
{article.title}
      
{article.content}

      
        Edit Article
      
    
  );
}

Aqui, o botão "Editar Artigo" só estará visível se o usuário tiver permissão para atualizar o artigo.

Etapa 5: Lidando com acesso não autorizado

CASL também pode ajudar a gerenciar o que acontece quando um usuário tenta uma ação não autorizada. Isso pode ser feito verificando habilidades em manipuladores de eventos ou chamadas de API.

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

  // proceed with editing logic
};

Conclusão

Integrar CASL com React fornece uma maneira limpa e declarativa de gerenciar autorização em seus aplicativos. Ao definir habilidades e usar o componente Can, você pode controlar facilmente o que os usuários podem ver e fazer, melhorando a segurança e a experiência do usuário do seu aplicativo.