Binary Coffee

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

angular react vue

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

Opiniones