Zum Hauptinhalt springen

Frontend-Nutzung

Casbin.js ist ein Casbin-Addon, das Ihr Zugriffskontrollmanagement in der Frontend-Anwendung erleichtert.

Installation‚Äč

npm install casbin.js
npm install casbin

oder

yarn add casbin.js

Frontend Middlewares‚Äč

MiddlewareTypAutorBeschreibung
reakt-authzReagierenCasbinReagiere Wrapper f√ľr Casbin.js
rbac-ReaktionReagieren@daobengRollenbasierte Zugriffskontrolle in React mit HOCs, CASL und Casbin.js
vue-authzVueCasbinVue wrapper f√ľr Casbin.js
angular-authzWinkelCasbinWinkelwickeln f√ľr Casbin.js

Schnellstart‚Äč

Du kannst den manuellen Modus in deiner Frontend-Anwendung verwenden und die Berechtigung festlegen, wann immer du möchtest.

const casbinjs = require("casbin. s");
// Benutzerberechtigung:
// Er/Sie kann `data1` und `data2` Objekte lesen und `data1` Objekt schreiben
const permission = {
"read": ["data1", "data2"],
"write": ["data1"]
}

// Casbin ausf√ľhren. s im manuellen Modus, was erfordert, dass Sie die Berechtigung manuell festlegen.
const authorizer = new casbinjs.Authorizer("manual");

jetzt haben wir einen Autorisierer Autorisierer bekommen. Wir k√∂nnen die Berechtigungsregeln √ľber die API authorizer.can() und authorizer.cannot() erhalten. Die R√ľckgabewerte dieser 2 APIs sind JavaScript-Versprechen (Details hier), also sollten wir die then() Methode des R√ľckgabewertes wie folgt verwenden:

result = authorizer.can("write", "data1");
Ergebnis. hen(Erfolg, fehlgeschlagen) => {
if (success) {
console. og("Sie können data1");
} else {
console. og("Sie können Daten nicht schreiben1");
}
});
// Ausgabe: Sie können Daten 1 schreiben

und cannot() wird auf die gleiche Weise verwendet:

result = authorizer.cannot("read", "data2");
Ergebnis. hen(Erfolg, fehlgeschlagen) => {
if (success) {
console. og("Sie können nicht data2");
} else {
console. og("Sie können data2");
}
});
// Ausgabe: Sie können data2 lesen

im obigen Code, Variable Erfolg in Parametern bedeutet, dass die Anfrage das Ergebnis erhält, ohne einen Fehler zu werfen, und bedeutet nicht, dass die Berechtigungsregel wahr ist. fehlgeschlagen steht auch nicht mit den Berechtigungsregeln in Verbindung. Das macht nur Sinn, wenn im Antragsprozess etwas schief läuft.

Sie können auf unser Reaktionsbeispiel verweisen, um eine praktische Nutzung von Casbin.js zu sehen

Erweiterte Nutzung‚Äč

Casbin.js bietet eine perfekte Lösung zur Integration Ihres Frontend Access-Control-Managements in Ihren Backend Casbin Service.

Verwenden Sie den Auto- Modus und geben Sie Ihren Endpunkt bei der Initialisierung des Kasbins an. s Authorizerwird automatisch die Berechtigung synchronisieren und den Frontend-Status manipulieren.

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

// Setzen Sie Ihre Backend casbin Service url
const authorizer = new casbinjs. uthorizer(
'auto', // Modus
{endpoint: 'http://your_endpoint/api/casbin'}
);

// Besucher einstellen.
// Casbin.js wird die Berechtigung automatisch mit Ihrem Backend Casbin Service synchronisieren.
authorizer.setUser("Tom");

// Berechtigung auswerten
result = authorizer.can("read", "data1");
Ergebnis. Sie(Erfolgreich fehlgeschlagen) => {
if (success) {
// Einige Frontend-Prozeduren ...
}
});

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

note

Dein Endpunkt-Server sollte so etwas wie

{
"other":"other",
"data": "What you get from `CasbinJsGetPermissionForUser`"
}
// Router
beego.Router("api/casbin", &controllers.APIController{}, "GET:GetFrontendPermission")

// Controller
func (c *APIController) GetFrontendPermission() {
// Besucher von den GET-Parametern holen. (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 fronend.
c.ServeJSON()
}
note

Derzeit wird CasbinJsGetPermissionForUser api nur in Go Casbin und Node-Casbin unterst√ľtzt. Wenn Sie m√∂chten, dass diese Api in anderen Sprachen unterst√ľtzt wird, rufen Sie bitte ein Problem an oder hinterlassen Sie einen Kommentar unten.

API-Liste‚Äč

setPermission(permission: string)‚Äč

Berechtigungsobjekt festlegen. Immer im manuellen Modus verwendet.

setUser(user: string)‚Äč

Legen Sie die Besucheridentität fest und aktualisieren Sie die Berechtigung. Immer im Auto- Modus verwendet.

can(action: string, object: string)‚Äč

Pr√ľfen Sie, ob der Benutzer Aktion auf Objekt ausf√ľhren kann.

cannot(action: string, object: string)‚Äč

Check if the user cannot perform action on object.

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

Pr√ľfen Sie, ob der Benutzer Aktion auf allen Objekten in Objekten ausf√ľhren kann.

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

Pr√ľfen Sie, ob der Benutzer Aktion auf eines der Objekte ausf√ľhren kann.

Warum Casbin.js‚Äč

Die Leute fragen sich vielleicht, was zwischen Node-Casbin und Casbin.js liegt. Mit einem Wort: Node-Casbin ist der Kern von Casbin in NodeJS-Umgebung implementiert und wird normalerweise als Access-Control-Management-Toolkit am Serverende verwendet. Casbin.js ist eine Frontend-Bibliothek, die Ihnen hilft, Casbin zu nutzen, um Ihren Website-Benutzer auf der Client-Seite zu autorisieren.

Normalerweise es ist nicht angemessen, direkt einen Casbin-Dienst aufzubauen und die Autorisierung/Vollstreckungsaufgaben an einer Web-Frontend-Anwendung zu erledigen, da folgende Probleme auftreten:

  1. Wenn jemand den Client aktiviert, wird der Vollstrecker initialisiert und er wird alle Richtlinien aus dem Backend persistente Ebenen ziehen. Eine hohe Koncurrenz könnte die Datenbanken stark unter Druck setzen und einen hohen Netzwerkdurchsatz kosten. 
  2. Das Laden aller Richtlinien auf die Kundenseite könnte sichere Risiken mit sich bringen.
  3. Schwierig f√ľr die Trennung zwischen Client und Server sowie die agile Entwicklung.

Wir w√ľnschen Ihnen ein Werkzeug, das die Verwendung von Casbin im Frontend erleichtert. Tats√§chlich ist der Kern von Casbin.js die Manipulation der aktuellen Benutzerberechtigung auf der Client-Seite. Wie Sie bereits erw√§hnt haben, holt Casbin.js einen bestimmten Endpunkt. Diese Prozedur wird die Berechtigung des Benutzers mit dem Backend Casbin Service synchronisieren. Nachdem die Berechtigungsdaten vorliegen, k√∂nnen Entwickler Casbin.js Schnittstellen verwenden, um das Verhalten des Benutzers auf der Frontend-Seite zu verwalten.

Kasbin s vermeiden die beiden oben genannten Probleme: Der Casbin-Service wird nicht mehr wiederholt in Anspruch genommen, und die Größe der Übertragung von Nachrichten zwischen dem Client und dem Server wird reduziert. Wir vermeiden auch, alle Politiken an der Front zu speichern. Der Benutzer kann nur auf seine eigene Berechtigung zugreifen, hat aber keine Ahnung von Dingen wie dem Zugriffskontrollmodell und den Berechtigungen anderer Benutzer. Außerdem kann Casbin.js auch den Client und den Server im Autorisierungsmanagement effizient entkoppeln.