Frontend Usage

Casbin.js est un addon Casbin qui facilite la gestion de votre contrôle d'accès dans l'application frontend.

Installation

npm install casbin.js
npm install casbin

ou

yarn add casbin.js

Middlewares Frontend

Middleware	Type	Auteur	Description
react-authz	React	Casbin	Enveloppe React pour Casbin.js
rbac-react	React	@daobeng	Contrôle d'accès basé sur les rôles dans React en utilisant HOCs, CASL et Casbin.js
vue-authz	Vue	Casbin	Enveloppe Vue pour Casbin.js
angular-authz	Angular	Casbin	Enveloppe Angular pour Casbin.js

Démarrage rapide

Vous pouvez utiliser le mode manuel dans votre application frontend et définir les permissions quand vous le souhaitez.

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

Nous avons maintenant un authorizer, authorizer. Nous pouvons obtenir des règles de permission de celui-ci en utilisant les APIs authorizer.can() et authorizer.cannot(). Les valeurs de retour de ces 2 APIs sont des Promesses JavaScript (détails ici), nous devrions donc utiliser la méthode then() de la valeur de retour comme ceci:

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() est utilisée de la même manière :

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

Dans le code ci-dessus, la variable success dans les paramètres signifie que la requête obtient le résultat sans lancer d'erreur et ne signifie pas que la règle d'autorisation est true. La variable failed n'est également pas liée aux règles d'autorisation. Cela n'a de sens que lorsque quelque chose se passe mal dans le processus de la requête.

Vous pouvez vous référer à notre exemple React pour voir une utilisation pratique de Casbin.js.

Objet de permission

Casbin.js acceptera un objet JSON pour manipuler la permission correspondante d'un visiteur. Par exemple :

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

L'objet de permission ci-dessus montre que le visiteur peut lire les objets data1 et data2, tandis qu'ils ne peuvent écrire que les objets data1.

Utilisation avancée

Casbin.js fournit une solution parfaite pour intégrer votre gestion de contrôle d'accès frontend avec votre service Casbin backend.

Utilisez le mode auto et spécifiez votre point de terminaison lors de l'initialisation de l'Authorizer Casbin.js, il synchronisera automatiquement la permission et manipulera le statut 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 ...
    }
});

En conséquence, vous devez exposer une interface (par exemple, une 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 retourner 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() {
    // 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()
}

note

Actuellement, l'API CasbinJsGetPermissionForUser n'est prise en charge que dans Go Casbin et Node-Casbin. Si vous souhaitez que cette API soit prise en charge dans d'autres langues, veuillez soulever un problème ou laisser un commentaire ci-dessous.

Liste des API

setPermission(permission: string)

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

setUser(user: string)

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

can(action: string, object: string)

Vérifiez si l'utilisateur peut effectuer action sur object.

cannot(action: string, object: string)

Vérifiez si l'utilisateur ne peut pas effectuer action sur object.

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

Vérifiez si l'utilisateur peut effectuer action sur tous les objets dans objects.

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

Vérifiez si l'utilisateur peut effectuer action sur l'un quelconque des objects.

Pourquoi Casbin.js

Les gens peuvent se demander quelle est la différence entre Node-Casbin et Casbin.js. En un mot, Node-Casbin est le cœur de Casbin implémenté dans l'environnement NodeJS, et il est normalement utilisé comme une boîte à outils de gestion de contrôle d'accès aux extrémités du serveur. Casbin.js est une bibliothèque frontend qui vous aide à utiliser Casbin pour autoriser vos utilisateurs de pages Web côté client.

Normalement, il n'est pas approprié de construire directement un service Casbin et d'effectuer les tâches d'autorisation/application à une application frontend Web en raison des problèmes suivants :

1. Lorsque quelqu'un allume le client, l'exécuteur sera initialisé, et il tirera toutes les politiques des couches persistantes du backend. Une haute concurrence pourrait exercer une forte pression sur les bases de données et coûter beaucoup de débit réseau.
2. Charger toutes les politiques sur le côté client pourrait présenter des risques de sécurité.
3. Il est difficile de séparer le client et le serveur ainsi que de faciliter le développement agile.

Nous avons besoin d'un outil qui facilite l'utilisation de Casbin à l'extrémité frontend. En fait, le cœur de Casbin.js est la manipulation de la permission de l'utilisateur actuel côté client. Comme vous l'avez mentionné, Casbin.js effectue une récupération à partir d'un point d'extrémité spécifié. Cette procédure synchronisera la permission de l'utilisateur avec le service Casbin du backend. Après avoir obtenu les données de permission, les développeurs peuvent utiliser les interfaces Casbin.js pour gérer le comportement de l'utilisateur côté frontend.

Casbin.js évite les deux problèmes mentionnés ci-dessus : le service Casbin ne sera plus tiré à plusieurs reprises, et la taille des messages passant entre le client et le serveur est réduite. Nous évitons également de stocker toutes les politiques à l'extrémité frontend. L'utilisateur ne peut accéder qu'à sa propre permission, mais n'a aucune connaissance du modèle de contrôle d'accès et des permissions des autres utilisateurs. De plus, Casbin.js peut également découpler efficacement le client et le serveur dans la gestion de l'autorisation.