Frontend Usage

Casbin.js ist ein Casbin-Addon, das die Verwaltung Ihrer Zugriffskontrolle in der Frontend-Anwendung erleichtert.

Installation

npm install casbin.js
npm install casbin

oder

yarn add casbin.js

Frontend-Middlewares

Middleware	Typ	Autor	Beschreibung
react-authz	React	Casbin	React-Wrapper für Casbin.js
rbac-react	React	@daobeng	Rollenbasierte Zugriffskontrolle in React mit HOCs, CASL und Casbin.js
vue-authz	Vue	Casbin	Vue-Wrapper für Casbin.js
angular-authz	Angular	Casbin	Angular-Wrapper für Casbin.js

Schnellstart

Sie können den manual Modus in Ihrer Frontend-Anwendung verwenden und die Berechtigungen setzen, wann immer Sie möchten.

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

Jetzt haben wir einen Autorisierer, authorizer. Wir können Berechtigungsregeln von ihm erhalten, indem wir die authorizer.can() und authorizer.cannot() APIs verwenden. Die Rückgabewerte dieser 2 APIs sind JavaScript Promises (Details hier), daher sollten wir die then() Methode des Rückgabewerts wie folgt verwenden:

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

Die cannot() API wird auf die gleiche Weise verwendet:

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

Im obigen Code bedeutet die success Variable in den Parametern, dass die Anfrage das Ergebnis erhält, ohne einen Fehler auszulösen und bedeutet nicht, dass die Berechtigungsregel true ist. Die failed Variable hat ebenfalls nichts mit den Berechtigungsregeln zu tun. Es macht nur Sinn, wenn im Prozess der Anfrage etwas schief geht.

Sie können sich unser React-Beispiel ansehen, um eine praktische Verwendung von Casbin.js zu sehen.

Berechtigungsobjekt

Casbin.js akzeptiert ein JSON-Objekt, um die entsprechende Berechtigung eines Besuchers zu manipulieren. Zum Beispiel:

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

Das oben gezeigte Berechtigungsobjekt zeigt, dass der Besucher die data1 und data2 Objekte lesen kann, während sie nur die data1 Objekte schreiben können.

Erweiterte Nutzung

Casbin.js bietet eine perfekte Lösung für die Integration Ihres Frontend-Zugriffskontrollmanagements mit Ihrem Backend-Casbin-Service.

Verwenden Sie den auto Modus und geben Sie Ihren Endpunkt bei der Initialisierung des Casbin.js Authorizer an, er wird automatisch die Berechtigung synchronisieren und den Frontend-Status manipulieren.

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

Entsprechend müssen Sie eine Schnittstelle (z.B. eine RestAPI) freigeben, um das Berechtigungsobjekt zu generieren und es an das Frontend zu übergeben. Rufen Sie in Ihrem API-Controller CasbinJsGetUserPermission auf, um das Berechtigungsobjekt zu konstruieren. Hier ist ein Beispiel in Beego:

notiz

Ihr Endpunktserver sollte so etwas zurückgeben

{
    "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()
}

notiz

Derzeit wird die CasbinJsGetPermissionForUser API nur in Go Casbin und Node-Casbin unterstützt. Wenn Sie möchten, dass diese API in anderen Sprachen unterstützt wird, stellen Sie bitte ein Problem oder hinterlassen Sie einen Kommentar unten.

API-Liste

`setPermission(permission: string)`

Setzen Sie das Berechtigungsobjekt. Immer im manual Modus verwendet.

`setUser(user: string)`

Setzen Sie die Besucheridentität und aktualisieren Sie die Berechtigung. Immer im auto Modus verwendet.

`can(action: string, object: string)`

Überprüfen Sie, ob der Benutzer action auf object ausführen kann.

`cannot(action: string, object: string)`

Überprüfen Sie, ob der Benutzer action auf object nicht ausführen kann.

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

Überprüfen Sie, ob der Benutzer action auf allen Objekten in objects ausführen kann.

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

Überprüfen Sie, ob der Benutzer action auf einem der objects ausführen kann.

Warum Casbin.js

Die Leute fragen sich vielleicht, was der Unterschied zwischen Node-Casbin und Casbin.js ist. Mit einem Wort, Node-Casbin ist der Kern von Casbin, implementiert in der NodeJS-Umgebung, und wird normalerweise als Zugriffskontroll-Management-Toolkit an den Serverenden verwendet. Casbin.js ist eine Frontend-Bibliothek, die Ihnen hilft, Casbin zu verwenden, um Ihre Webseitenbenutzer auf der Client-Seite zu autorisieren.

Normalerweise ist es nicht angemessen, direkt einen Casbin-Dienst aufzubauen und die Autorisierungs-/Durchsetzungsaufgaben in einer Web-Frontend-Anwendung durchzuführen, aufgrund der folgenden Probleme:

Wenn jemand den Client einschaltet, wird der Durchsetzer initialisiert und er zieht alle Richtlinien aus den Backend-Persistent-Schichten. Eine hohe Nebenläufigkeit könnte hohen Druck auf die Datenbanken ausüben und viel Netzwerkdurchsatz kosten.
Das Laden aller Richtlinien auf die Client-Seite könnte Sicherheitsrisiken mit sich bringen.
Es ist schwierig, den Client und den Server zu trennen sowie eine agile Entwicklung zu erleichtern.

Wir benötigen ein Tool, das den Prozess der Verwendung von Casbin im Frontend erleichtert. Tatsächlich ist der Kern von Casbin.js die Manipulation der Berechtigungen des aktuellen Benutzers auf der Client-Seite. Wie Sie erwähnt haben, führt Casbin.js einen Abruf von einem bestimmten Endpunkt durch. Dieses Verfahren synchronisiert die Berechtigung des Benutzers mit dem Backend-Casbin-Dienst. Nachdem sie die Berechtigungsdaten haben, können Entwickler die Casbin.js-Schnittstellen verwenden, um das Verhalten des Benutzers auf der Frontend-Seite zu verwalten.

Casbin.js vermeidet die beiden oben genannten Probleme: Der Casbin-Dienst wird nicht mehr wiederholt hochgezogen, und die Größe der zwischen dem Client und dem Server übertragenen Nachrichten wird reduziert. Wir vermeiden auch, alle Richtlinien im Frontend zu speichern. Der Benutzer kann nur auf seine eigene Berechtigung zugreifen, hat aber keine Kenntnisse über das Zugriffskontrollmodell und die Berechtigungen anderer Benutzer. Außerdem kann Casbin.js auch effizient den Client und den Server in der Autorisierungsverwaltung entkoppeln.