跳转至主要内容

Frontend Usage

Casbin.js是一个Casbin插件，它可以方便你在前端应用程序中管理访问控制。

安装​

npm install casbin.js
npm install casbin

或

yarn add casbin.js

前端中间件​

中间件类型作者描述
react-authzReactCasbinCasbin.js的React封装
rbac-reactReact@daobeng在React中使用HOCs、CASL和Casbin.js实现基于角色的访问控制
vue-authzVueCasbinCasbin.js的Vue封装
angular-authzAngularCasbinCasbin.js的Angular封装

快速开始​

你可以在你的前端应用程序中使用manual模式，并在你希望的时候设置权限。

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

现在我们有了一个授权器，authorizer。 我们可以通过使用authorizer.can()和authorizer.cannot()API从中获取权限规则。 这两个API的返回值都是JavaScript Promises（详情在此），所以我们应该像这样使用返回值的then()方法：

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

cannot() API的使用方式与此相同：

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

在上面的代码中，参数中的success变量意味着请求得到了结果而没有抛出错误，并不意味着权限规则是true。 failed变量也与权限规则无关。 只有在请求过程中出现问题时，它才有意义。

你可以参考我们的React示例来看看Casbin.js的实际用法。

权限对象​

Casbin.js将接受一个JSON对象来操作访问者的相应权限。 例如：

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

上面的权限对象显示访问者可以读取 data1和data2对象，而他们只能写入 data1对象。

高级用法​

Casbin.js为将你的前端访问控制管理与你的后端Casbin服务集成提供了完美的解决方案。

使用auto模式并在初始化Casbin.js Authorizer时指定你的端点，它将自动同步权限并操作前端状态。

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 ...
    }
});

相应地，你需要暴露一个接口（例如，一个RestAPI）来生成权限对象并将其传递给前端。 在你的API控制器中，调用CasbinJsGetUserPermission来构造权限对象。 这是一个在Beego中的例子：

备注

你的端点服务器应该返回类似这样的东西

{
    "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()
}
备注

目前，CasbinJsGetPermissionForUser API只在Go Casbin和Node-Casbin中支持。 如果你希望这个API在其他语言中得到支持，请提出一个问题或在下面留言。

API列表​

setPermission(permission: string)​

设置权限对象。 总是在manual模式中使用。

setUser(user: string)​

设置访问者身份并更新权限。 总是在auto模式中使用。

can(action: string, object: string)​

检查用户是否可以对object执行action。

cannot(action: string, object: string)​

检查用户是否不能对object执行action。

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

检查用户是否可以对objects中的所有对象执行action。

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

检查用户是否可以对objects中的任何一个对象执行action。

为什么选择Casbin.js​

人们可能会对Node-Casbin和Casbin.js之间的区别感到疑惑。 简单来说，Node-Casbin是在NodeJS环境中实现的Casbin的核心，通常用作服务器端的访问控制管理工具包。 Casbin.js是一个前端库，帮助你在客户端使用Casbin对你的网页用户进行授权。

通常，直接在Web前端应用程序中建立Casbin服务并执行授权/执行任务是不合适的，原因如下：

  1. 当有人打开客户端时，执行器将被初始化，并将从后端持久层拉取所有策略。 高并发可能会给数据库带来巨大压力，并消耗大量的网络吞吐量。
  2. 将所有策略加载到客户端可能带来安全风险。
  3. 难以分离客户端和服务器，以及促进敏捷开发。

我们需要一个工具来简化在前端使用Casbin的过程。 实际上，Casbin.js的核心是在客户端操作当前用户的权限。 如你所述，Casbin.js会从指定的端点获取数据。 这个过程将用户的权限与后端Casbin服务同步。 在获取了权限数据后，开发者可以使用Casbin.js接口来管理用户在前端的行为。

Casbin.js避免了上述两个问题：Casbin服务不再被反复拉起，客户端和服务器之间传递消息的大小也减小了。 我们也避免了在前端存储所有的策略。 用户只能访问他们自己的权限，但对访问控制模型和其他用户的权限一无所知。 此外，Casbin.js还可以有效地在授权管理中解耦客户端和服务器。