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â
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â
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:
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()
}
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 :
- 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.Â
- Le chargement de toutes les politiques auprÚs des clients pourrait entraßner des risques sûrs.
- 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.