Como manejar los roles y permisos en el lado del cliente con CASL

CASL es una biblioteca JavaScript de autorización isomórfica que restringe los recursos a los que un cliente determinado puede acceder. Está diseñado para ser totalmente escalable y está disponoble para manejar permisos en React, Angular y Vue.

Seguramente en más de una ocasión te has encontrado con la típica condicional que usas todo el tiempo para ver si el usuario está logueado, si tiene acceso a una vista en concreto, si puede crear, editar, eliminar determinados datos. Pues con CASL será mucho más sencillo todo este proceso.

Tanto si decides establecer los permisos en el frontend como si los obtendrás a partir del backend.

Instalando la librería

Para instalar debemos tener en cuenta el framework que estamos usando.

yarn add @casl/angular @casl/ability
#or
yarn add @casl/react @casl/ability
#or
yarn add @casl/vue@1.x @casl/ability

Usando CASL: detalles a tener en cuenta

Como verás a continuación, establecer los permisos de determinado usuario es bastante literal. Debemos tener en cuenta lo siguiente.

1. Acción del usuario.

Describe lo que el usuario puede hacer realmente en la aplicación. La acción del usuario es una palabra que depende de la lógica del negocios. Lo más común sera usar la lista de palabras de CRUD - create, read, update y delete.

2. Modelo

El modelo que se desea comprobar durante la acción del usuario. Normalmente se trata de una entidad, por ejemplo, Artículo, Usuario, Producto.

3. Campo

Se utiliza para restringir la acción del usuario solo a los campos del modelo. Por ejemplo, para permitir que se actualice el campo descripción de un artículo y no el título.

4. Condiciones

Aquí se utiliza para que el usuario, por ejemplo, solo pueda actualizar sus propios artículos.

Manos a la acción

Vamos a definir y verificar permisos, para ello debemos inicializar los mismos. Por lo general se crean en un archivo ability.js.

import { defineAbility } from '@casl/ability';

export default defineAbility((can, cannot) => {
  can('manage', 'all');
  cannot('delete', 'all');
});

Creamos una instancia de Ability que permite leer, editar y crear todos los modelos pero no borrar. Sí, can y cannot reciben los mismos parámetros, que serían la acción del usuario y el modelo.

Ahora para probar, simplemente debemos importar nuestra instancia donde vayamos a usarla.

import ability from './ability.js';

ability.can('read', 'Post') // true
ability.can('read', 'User') // true
ability.can('delete', 'User') // false
ability.cannot('delete', 'User') // true

Ahora vamos a agregar unas condiciones, que el usuario solo pueda editar sus artículos.

export default (user) => defineAbility((can, cannot) => {
  can('read', 'all');
  cannot('delete', 'all');
  if(user.isLoggedIn) {
    can('update', 'Post', { authorId: user.id });
  }
});

Para usarlo debemos hacer lo siguiente:

import defineAbilityFor from './ability';

const user = { id: 1 };
const ability = defineAbilityFor(user);
const article = /* intentionally not defined */;

ability.can('update', article);

🥳 Como ves es súper sencillo y práctico, en la documentación aparecen cientos de ejemplos y casos de uso. Así que te recomiendo si planeas usarla que te des una vuelta por allá. Y esto es todo espero que te haya servido para manejar los permisos de tu app en el lado del cliente.

📋 Documentación