Frontend Usage

Casbin.js è un addon di Casbin che facilita la gestione del controllo degli accessi nell'applicazione frontend.

Installazione

npm install casbin.js
npm install casbin

o

yarn add casbin.js

Middleware Frontend

Middleware	Tipo	Autore	Descrizione
react-authz	React	Casbin	Wrapper React per Casbin.js
rbac-react	React	@daobeng	Controllo degli Accessi Basato sui Ruoli in React utilizzando HOCs, CASL e Casbin.js
vue-authz	Vue	Casbin	Wrapper Vue per Casbin.js
angular-authz	Angular	Casbin	Wrapper Angular per Casbin.js

Guida introduttiva

Puoi utilizzare la modalità manual nella tua applicazione frontend e impostare le autorizzazioni ogni volta che desideri.

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

Ora abbiamo un autorizzatore, authorizer. Possiamo ottenere le regole di autorizzazione da esso utilizzando le API authorizer.can() e authorizer.cannot(). I valori di ritorno di queste 2 API sono Promesse JavaScript (dettagli qui), quindi dovremmo utilizzare il metodo then() del valore di ritorno in questo modo:

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

L'API cannot() viene utilizzata allo stesso modo:

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

Nel codice sopra, la variabile success nei parametri significa che la richiesta ottiene il risultato senza generare un errore e non significa che la regola di autorizzazione sia true. La variabile failed è anche non correlata alle regole di autorizzazione. Ha senso solo quando qualcosa va storto nel processo della richiesta.

Puoi fare riferimento al nostro esempio React per vedere un utilizzo pratico di Casbin.js.

Oggetto Permesso

Casbin.js accetterà un oggetto JSON per manipolare il corrispondente permesso di un visitatore. Ad esempio:

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

L'oggetto permesso sopra mostra che il visitatore può leggere gli oggetti data1 e data2, mentre può solo scrivere gli oggetti data1.

Utilizzo Avanzato

Casbin.js fornisce una soluzione perfetta per integrare la gestione degli accessi del tuo frontend con il tuo servizio backend Casbin.

Usa la modalità auto e specifica il tuo endpoint durante l'inizializzazione dell'Authorizer di Casbin.js, sincronizzerà automaticamente i permessi e manipolerà lo stato 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 ...
    }
});

Di conseguenza, devi esporre un'interfaccia (ad esempio, un RestAPI) per generare l'oggetto permesso e passarlo al frontend. Nel tuo controller API, chiama CasbinJsGetUserPermission per costruire l'oggetto permesso. Ecco un esempio in Beego:

nota

Il tuo server endpoint dovrebbe restituire qualcosa del genere

{
    "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

Attualmente, l'API CasbinJsGetPermissionForUser è supportata solo in Go Casbin e Node-Casbin. Se desideri che questa API sia supportata in altre lingue, per favore segnala un problema o lascia un commento qui sotto.

Elenco API

setPermission(permission: string)

Imposta l'oggetto permesso. Sempre utilizzato in modalità manual.

setUser(user: string)

Imposta l'identità del visitatore e aggiorna il permesso. Sempre utilizzato in modalità auto.

can(action: string, object: string)

Controlla se l'utente può eseguire azione su oggetto.

cannot(action: string, object: string)

Controlla se l'utente non può eseguire azione su oggetto.

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

Controlla se l'utente può eseguire azione su tutti gli oggetti in oggetti.

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

Controlla se l'utente può eseguire azione su almeno uno degli oggetti.

Perché Casbin.js

Le persone potrebbero chiedersi qual è la differenza tra Node-Casbin e Casbin.js. In parole povere, Node-Casbin è il nucleo di Casbin implementato nell'ambiente NodeJS e viene normalmente utilizzato come toolkit di gestione del controllo degli accessi ai lati del server. Casbin.js è una libreria per il frontend che ti aiuta a utilizzare Casbin per autorizzare gli utenti della tua pagina web sul lato client.

Normalmente, non è appropriato costruire direttamente un servizio Casbin e svolgere le attività di autorizzazione/imposizione in un'applicazione web frontend a causa dei seguenti problemi:

1. Quando qualcuno accende il client, l'enforcer verrà inizializzato e tirerà tutte le policy dai livelli persistenti del backend. Un'elevata concorrenza potrebbe portare una forte pressione sui database e costare molta larghezza di banda di rete.
2. Caricare tutte le policy sul lato client potrebbe portare rischi per la sicurezza.
3. È difficile separare client e server e facilitare lo sviluppo agile.

Abbiamo bisogno di uno strumento che faciliti l'uso di Casbin sul frontend. In realtà, il nucleo di Casbin.js è la manipolazione del permesso dell'utente corrente sul lato client. Come hai menzionato, Casbin.js esegue un fetch da un endpoint specificato. Questa procedura sincronizzerà le autorizzazioni dell'utente con il servizio backend di Casbin. Dopo aver ottenuto i dati delle autorizzazioni, gli sviluppatori possono utilizzare le interfacce di Casbin.js per gestire il comportamento dell'utente sul lato frontend.

Casbin.js evita i due problemi sopra menzionati: il servizio Casbin non verrà più tirato su ripetutamente e la dimensione dei messaggi scambiati tra il client e il server è ridotta. Evitiamo anche di memorizzare tutte le politiche sul frontend. L'utente può accedere solo alle proprie autorizzazioni, ma non ha conoscenza del modello di controllo degli accessi e delle autorizzazioni degli altri utenti. Inoltre, Casbin.js può anche efficacemente disaccoppiare il client e il server nella gestione delle autorizzazioni.