前端使用

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

安装

npm install casbin.js
npm install casbin

或者

yarn add casbin.js

前端中间件

中间件	类型	作者	描述
react-authz	React	Casbin	Casbin.js 的 React 包装器
rbac-react	React	@daobeng	React 基于角色的访问控制, 使用 HOCs, CASL 和 Casbin.js
vue-authz	Vue	Casbin	Casbin.js 的 Vue 包装器
angular-authz	Angular	Casbin	Casbin.js的Angular包装器

快速入门

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

const casbinjs = require("casbin.js");
// 设置用户权限
// 他/她可以可以读取data1和data2并且可以写入data1
const permission = {
    "read": ["data1", "data2"],
    "write": ["data1"]
}

// 在manual模式使用Casbin.js需要您手动设置权限
const authorizer = new casbinjs.Authorizer("manual");

Now we have an authorizer, authorizer. We can get permission rules from it by using the authorizer.can() and authorizer.cannot() APIs. 这2个API的返回值是JavaScript Promise (详细信息) 所以我们应该使用 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");
    }
});
// 输出：您可以写入data1

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

result = authorizer.cannot("read", "data2");
result.then((success, failed) => {
    if (success) {
        console.log("you cannot read data2");
    } else {
        console.log("you can read data2");
    }
});
// 输出：您可以读取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. 只有在请求过程中出现错误时才有意义。

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.

高级用法

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 会自动与你的后端Casbin服务同步权限。
authorizer.setUser("Tom");

// 评估权限
result = authorizer.can("read", "data1");
result.then((success, failed) => {
    if (success) {
        // 一些前端操作
    }
});

因此，您需要开放一个接口(例如一个 RestAPI)来创建权限对象并将其返回前端。 在你的 API 控制器中，调用 CasbinJsGetUserPermission 以创建权限对象。 下面是一个 Beego 框架的示例：

备注

注意您的端点服务器应该返回类似的内容

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

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

// 控制器
func (c *APIController) GetFrontendPermission() {
    // 在 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()
}

备注

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.

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

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

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

检查用户是否能对 objects 中的任意一个执行 action。

为什么选择 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.

通常，由于以下问题，直接构建一个 Casbin 服务并在网页前端执行授权/执行是不妥当的：

1. When someone turns on the client, the enforcer will be initialized, and it will pull all the policies from the backend persistent layers. 高并发会为数据库带来巨大的压力并带来极高的网络成本。
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. 正如你提到的，Casbin.js 从一个指定的后端获取数据。 这个程序会与 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. 此外，Casbin.js 还能有效地在授权管理方面分离客户端和服务端。