Passer au contenu principal

Utilisation du frontend

Casbin.js est un addon Casbin qui facilite votre gestion du contrĂŽle d'accĂšs dans l'application frontend.

Installation​

npm install casbin.js
npm install casbin

ou

yarn add casbin.js

Middlewares du frontend​

MiddlewareType de texteAuteurDescription
authentification-réactionRéagirCasbinReact wrapper pour Casbin.js
rbac-réactionRéagir@daobengContrÎle d'accÚs basé sur les rÎles dans React à l'aide de HOCs, CASL et Casbin.js
authentification-VieVueCasbinGestionnaire de vue pour Casbin.js
identificateur-angulaireAngulaireCasbinEnveloppe Angulaire pour Casbin.js

DĂ©marrage rapide​

Vous pouvez utiliser le mode manuel dans votre application en frontend et définir la permission quand vous le souhaitez.

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

maintenant nous avons un autorisateur autorisateur. Nous pouvons en obtenir les rÚgles de permission en utilisant l'API authorzer.can() et authorizzer.cannot(). 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

et cannot() est utilisĂ© de la mĂȘme maniĂšre :

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

dans le code ci-dessus, la variable success dans les paramĂštres signifie que la requĂȘte obtient le rĂ©sultat sans Ă©mettre d'erreur, et ne veut pas dire que la rĂšgle de permission est true. Ă©chec n'est pas aussi liĂ© aux rĂšgles d'autorisation. Cela n'a de sens que lorsque quelque chose ne va pas dans le processus de la demande.

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

Utilisation avancĂ©e​

Casbin.js offre une solution parfaite pour intĂ©grer votre gestion du contrĂŽle d’accĂšs frontal Ă  votre service Casbin d’arriĂšre-plan.

Utilisez le mode auto et spécifiez votre point de terminaison lors de l'initialisation de la Casbin. s Authorizer, il synchronisera automatiquement les permissions et manipulera l'état du frontend.

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

// DĂ©finissez votre adresse de service casbin d'arriĂšre-plan
const authorizer = new casbinjs. uthorizer(
'auto', // mode
{endpoint: 'http://your_endpoint/api/casbin'}
);

// DĂ©finit votre visiteur.
// 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 fronend.
c.ServeJSON()
}
note

Actuellement, l'api CasbinJsGetPermissionForUser n'est pris en charge que dans Go Casbin et Node-Casbin. Si vous voulez que cet api soit pris 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é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>)​

VĂ©rifie si l'utilisateur peut effectuer l'action sur **tout l'objet** dans les objets.

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

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

Pourquoi Casbin.js​

Les gens peuvent se demander 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 outil de gestion d'accĂšs Ă  la fin du serveur. Casbin.js est une bibliothĂšque en frontend qui vous aide Ă  utiliser Casbin pour autoriser l'utilisateur de votre page Web du cĂŽtĂ© client.

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. Quand quelqu'un allume le client, le responsable est initialisé, et il retirera toutes les rÚgles des couches persistantes du backend. 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. Le chargement de toutes les politiques auprÚs des clients pourrait entraßner des risques sûrs.
  3. Difficile pour la séparation entre le client et le serveur ainsi que pour le développement agile .

Nous souhaitons un outil qui facilite le processus d'utilisation de Casbin sur le frontend. En fait, le cƓur de Casbin.js est la manipulation de la permission de l'utilisateur actuel du cĂŽtĂ© client. 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. AprĂšs avoir les donnĂ©es d'autorisation, les dĂ©veloppeurs peuvent utiliser les interfaces Casbin.js pour gĂ©rer les comportements de l'utilisateur du cĂŽtĂ© du frontend.

Casbin. s évitent les deux problÚmes mentionnés ci-dessus: le service Casbin ne sera plus retiré à plusieurs reprises, et la taille des messages passés entre le client et le serveur est réduite. Nous évitons également de stocker toutes les politiques en frontend. L'utilisateur ne peut accéder qu'à sa propre autorisation, mais n'a aucune idée des choses telles que le modÚle de contrÎle d'accÚs et les autorisations des autres utilisateurs. De plus, Casbin.js peut également découpler efficacement le client et le serveur dans la gestion des autorisations.