Utilisation du frontend

Casbin.js is a Casbin addon that facilitates your access-control management in the frontend application.

Installation

npm install casbin.js
npm install casbin

ou

yarn add casbin.js

Middlewares du frontend

Middleware	Type de texte	Auteur	Description
authentification-réaction	Réagir	Casbin	React wrapper pour Casbin.js
rbac-réaction	Réagir	@daobeng	Contrôle d'accès basé sur les rôles dans React à l'aide de HOCs, CASL et Casbin.js
authentification-Vie	Vue	Casbin	Gestionnaire de vue pour Casbin.js
identificateur-angulaire	Angulaire	Casbin	Enveloppe Angulaire pour Casbin.js

Démarrage rapide

You can use the manual mode in your frontend application and set the permissions whenever you wish.

const casbinjs = require("casbin. s");
// Définit la permission de l'utilisateur :
// Il/She peut lire les objets `data1` et `data2` et peut écrire l'objet `data1`
const permission = {
    "read": ["data1", "data2"],
    "write": ["data1"]
}

// Exécute la casbine. s en mode manuel, ce qui vous oblige à définir les permissions manuellement.
const authorizer = new casbinjs.Authorizer("manuel");

Now we have an authorizer, authorizer. We can get permission rules from it by using the authorizer.can() and authorizer.cannot() APIs. Les valeurs de retour de ces 2 API sont des promesses JavaScript (détails ici), donc nous devrions utiliser la méthode then() de la valeur retournée comme ceci :

result = authorizer.can("write", "data1");
résultat. hen((succès, échec) => {
    if (success) {
        console. og("vous pouvez écrire data1");
    } autre {
        console. og("vous ne pouvez pas écrire des données1");
    }
});
// sortie: vous pouvez écrire des données1

The cannot() API is used in the same way:

result = authorizer.cannot("read", "data2");
résultat. hen((succès, échec) => {
    if (success) {
        console. og("vous ne pouvez pas lire les données2");
    } autre {
        console. og("vous pouvez lire data2");
    }
});
// output: you can read data2

In the code above, the success variable in the parameters means the request gets the result without throwing an error and doesn't mean that the permission rule is true. The failed variable is also unrelated to the permission rules. Cela n'a de sens que lorsque quelque chose ne va pas dans le processus de la demande.

You can refer to our React example to see a practical usage of Casbin.js.

Permission Object

Casbin.js will accept a JSON object to manipulate the corresponding permission of a visitor. For example:

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

The permission object above shows that the visitor can read the data1 and data2 objects, while they can only write the data1 objects.

Utilisation avancée

Casbin.js provides a perfect solution for integrating your frontend access-control management with your backend Casbin service.

Use the auto mode and specify your endpoint when initializing the Casbin.js Authorizer, it will automatically sync the permission and manipulate the frontend status.

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 synchronisera automatiquement la permission avec votre service Casbin backend.
authorizer.setUser("Tom");

// Évaluer la permission
résultat = authorizzer.can("read", "data1");
résultat. hen(succès, failed) => {
    if (success) {
        // Procédure du frontend ...
    }
});

En conséquence, vous devez exposer une interface (par exemple un RestAPI) pour générer l'objet de permission et le passer au frontend. Dans votre contrôleur API, appelez CasbinJsGetUserPermission pour construire l'objet de permission. Voici un exemple dans Beego:

note

Votre serveur de point de terminaison devrait renvoyer quelque chose comme

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

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

// Controller
func (c *APIController) GetFrontendPermission() {
    // Récupère le visiteur depuis les paramètres GET. (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()
}

note

Currently, the CasbinJsGetPermissionForUser API is only supported in Go Casbin and Node-Casbin. If you want this API to be supported in other languages, please raise an issue or leave a comment below.

Liste des API

setPermission(permission: string)

Définir l'objet de permission. Toujours utilisé en mode manuel.

setUser(user: string)

Définissez l'identité du visiteur et mettez à jour la permission. Toujours utilisé en mode auto.

can(action: string, object: string)

Vérifie si l'utilisateur peut effectuer l'action sur l'objet.

cannot(action: string, object: string)

Vérifie si l'utilisateur ne peut pas effectuer l'action sur l'objet.

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

Check if the user can perform action on all objects in objects.

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

Vérifie si l'utilisateur peut effectuer l'action sur **n'importe lequel** des objets.

Pourquoi Casbin.js

People may wonder about the difference between Node-Casbin and Casbin.js. In a word, Node-Casbin is the core of Casbin implemented in the NodeJS environment, and it's normally used as an access-controlling management toolkit at the server ends. Casbin.js is a frontend library that helps you use Casbin to authorize your webpage users at the client side.

Normalement, il n'est pas approprié de construire directement un service Casbin et de faire les tâches d'autorisation/mise en application sur une application du site web en raison des problèmes suivants :

1. When someone turns on the client, the enforcer will be initialized, and it will pull all the policies from the backend persistent layers. Une forte concurrence pourrait entraîner une forte pression sur les bases de données et coûter beaucoup de débit au réseau.
2. Loading all policies to the client side could bring security risks.
3. It is difficult to separate the client and server as well as facilitate agile development.

We need a tool that eases the process of using Casbin at the frontend. Actually, the core of Casbin.js is the manipulation of the current user's permission at the client side. Comme vous l'avez mentionné, Casbin.js fait une récupération à partir d'un point de terminaison spécifié. Cette procédure synchronisera la permission de l'utilisateur avec le service backend Casbin. After having the permission data, developers can use Casbin.js interfaces to manage the behavior of the user at the frontend side.

Casbin.js avoids the two problems mentioned above: Casbin service will no longer be pulled up repeatedly, and the size of passing messages between the client and the server is reduced. We also avoid storing all the policies at the frontend. The user can only access their own permission, but has no knowledge about the access-control model and other users' permissions. De plus, Casbin.js peut également découpler efficacement le client et le serveur dans la gestion des autorisations.