Frontend Usage

Casbin.js es un complemento de Casbin que facilita la gestión de control de acceso en la aplicación frontend.

Instalación

npm install casbin.js
npm install casbin

o

yarn add casbin.js

Middlewares de Frontend

Middleware	Tipo	Autor	Descripción
react-authz	React	Casbin	Envoltura de React para Casbin.js
rbac-react	React	@daobeng	Control de Acceso Basado en Roles en React usando HOCs, CASL y Casbin.js
vue-authz	Vue	Casbin	Envoltura de Vue para Casbin.js
angular-authz	Angular	Casbin	Envoltura de Angular para Casbin.js

Inicio Rápido

Puedes usar el modo manual en tu aplicación frontend y establecer los permisos cuando lo desees.

const casbinjs = require("casbin.js");
// Set the user's permission:
// He/She can read `data1` and `data2` objects and can write `data1` object
const permission = {
    "read": ["data1", "data2"],
    "write": ["data1"]
}

// Run casbin.js in manual mode, which requires you to set the permission manually.
const authorizer = new casbinjs.Authorizer("manual");

Ahora tenemos un autorizador, authorizer. Podemos obtener reglas de permiso de él usando las APIs authorizer.can() y authorizer.cannot(). Los valores de retorno de estas 2 APIs son Promesas de JavaScript (detalles aquí), por lo que debemos usar el método then() del valor de retorno de esta manera:

result = authorizer.can("write", "data1");
result.then((success, failed) => {
    if (success) {
        console.log("you can write data1");
    } else {
        console.log("you cannot write data1");
    }
});
// output: you can write data1

La API cannot() se usa de la misma manera:

result = authorizer.cannot("read", "data2");
result.then((success, failed) => {
    if (success) {
        console.log("you cannot read data2");
    } else {
        console.log("you can read data2");
    }
});
// output: you can read data2

En el código anterior, la variable success en los parámetros significa que la solicitud obtiene el resultado sin lanzar un error y no significa que la regla de permiso sea true. La variable failed también es ajena a las reglas de permiso. Solo tiene sentido cuando algo sale mal en el proceso de la solicitud.

Puedes referirte a nuestro ejemplo de React para ver un uso práctico de Casbin.js.

Objeto de Permiso

Casbin.js aceptará un objeto JSON para manipular el permiso correspondiente de un visitante. Por ejemplo:

{
    "read": ["data1", "data2"],
    "write": ["data1"]
}

El objeto de permiso anterior muestra que el visitante puede read los objetos data1 y data2, mientras que solo pueden write los objetos data1.

Uso Avanzado

Casbin.js proporciona una solución perfecta para integrar la gestión de control de acceso de tu frontend con tu servicio Casbin de backend.

Usa el modo auto y especifica tu punto final al inicializar el Authorizer de Casbin.js, sincronizará automáticamente el permiso y manipulará el estado del frontend.

const casbinjs = require('casbin.js');

// Set your backend Casbin service URL
const authorizer = new casbinjs.Authorizer(
    'auto', // mode
    {endpoint: 'http://your_endpoint/api/casbin'}
);

// Set your visitor.
// Casbin.js will automatically sync the permission with your backend Casbin service.
authorizer.setUser("Tom");

// Evaluate the permission
result = authorizer.can("read", "data1");
result.then((success, failed) => {
    if (success) {
        // Some frontend procedure ...
    }
});

Correspondientemente, necesitas exponer una interfaz (por ejemplo, una RestAPI) para generar el objeto de permiso y pasarlo al frontend. En tu controlador de API, llama a CasbinJsGetUserPermission para construir el objeto de permiso. Aquí hay un ejemplo en Beego:

nota

Tu servidor de punto final debería devolver algo como

{
    "other":"other",
    "data": "What you get from `CasbinJsGetPermissionForUser`"
}

// Router
beego.Router("api/casbin", &controllers.APIController{}, "GET:GetFrontendPermission")

// Controller
func (c *APIController) GetFrontendPermission() {
    // Get the visitor from the GET parameters. (The key is "casbin_subject")
    visitor := c.Input().Get("casbin_subject")
    // `e` is an initialized instance of Casbin Enforcer
    c.Data["perm"] = casbin.CasbinJsGetPermissionForUser(e, visitor)
    // Pass the data to the frontend.
    c.ServeJSON()
}

nota

Actualmente, la API CasbinJsGetPermissionForUser solo es compatible con Go Casbin y Node-Casbin. Si quieres que esta API sea compatible en otros idiomas, por favor plantea un problema o deja un comentario abajo.

Lista de API

setPermission(permission: string)

Establecer el objeto de permiso. Siempre se utiliza en modo manual.

setUser(user: string)

Establecer la identidad del visitante y actualizar el permiso. Siempre se utiliza en modo auto.

can(action: string, object: string)

Comprobar si el usuario puede realizar la action en object.

cannot(action: string, object: string)

Comprobar si el usuario no puede realizar la action en object.

canAll(action: string, objects: Array<object>)

Comprobar si el usuario puede realizar la action en todos los objetos en objects.

canAny(action: string, objects: Array<object>)

Comprobar si el usuario puede realizar la action en cualquiera de los objects.

Por qué Casbin.js

La gente puede preguntarse sobre la diferencia entre Node-Casbin y Casbin.js. En una palabra, Node-Casbin es el núcleo de Casbin implementado en el entorno de NodeJS, y normalmente se utiliza como un kit de herramientas de gestión de control de acceso en los extremos del servidor. Casbin.js es una biblioteca de frontend que te ayuda a utilizar Casbin para autorizar a los usuarios de tu página web en el lado del cliente.

Normalmente, no es adecuado construir directamente un servicio Casbin y realizar las tareas de autorización/ejecución en una aplicación de frontend web debido a los siguientes problemas:

1. Cuando alguien activa el cliente, el enforcer se inicializará y tirará de todas las políticas de las capas persistentes del backend. Una alta concurrencia podría traer una fuerte presión sobre las bases de datos y costar mucho ancho de banda de red.
2. Cargar todas las políticas al lado del cliente podría traer riesgos de seguridad.
3. Es difícil separar el cliente y el servidor, así como facilitar el desarrollo ágil.

Necesitamos una herramienta que facilite el proceso de usar Casbin en el frontend. De hecho, el núcleo de Casbin.js es la manipulación del permiso del usuario actual en el lado del cliente. Como mencionaste, Casbin.js hace una búsqueda desde un punto final especificado. Este procedimiento sincronizará el permiso del usuario con el servicio Casbin del backend. Después de tener los datos de permiso, los desarrolladores pueden usar las interfaces de Casbin.js para gestionar el comportamiento del usuario en el lado del frontend.

Casbin.js evita los dos problemas mencionados anteriormente: el servicio Casbin ya no se activará repetidamente, y se reduce el tamaño de los mensajes que pasan entre el cliente y el servidor. También evitamos almacenar todas las políticas en el frontend. El usuario solo puede acceder a su propio permiso, pero no tiene conocimiento sobre el modelo de control de acceso y los permisos de otros usuarios. Además, Casbin.js también puede desacoplar eficientemente el cliente y el servidor en la gestión de autorización.