前端使用

前端使用

发布者：admin 发表于：440天前阅读数：583 评论:0

Casbin.js是一个能够帮助你在前端应用中管理访问控制权限的Casbin前端版本。

安装

npm install casbin.js
npm install casbin

或者

yarn add casbin.js

快速开始

您可以在您的前端应用程序中使用 manual 模式，并随时设置权限。

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

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

现在我们有了一个授权者 authorizer。我们可以通过使用API authorizer.can()和authorizer.cannot()获得得许可规则。这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

cannnot() 以同样方式使用：

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

在上面的代码中，变量 success 意味着请求获得结果而不产生错误，而不意味着权限规则是 true failed 也和权限规则无关只有在请求过程中出现错误时才有意义。

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

高级用法

Casbin.js提供了一个完美的解决方案来将您的前端访问控制管理和后端Casbin服务一体化。

在初始化 Casbin.js Authorizer时使用 auto 模式并指定你的后端地址，它会自动同步权限并调整前端状态。

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

// 设置你的后端Casbin服务url
const authorizer = new casbinjs.Authorizer(
    'auto', // 模式
    {endpoint: 'http://your_endpoint/api/casbin'}
);

// 设置你的访客。 
// 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 请求的参数中获取访客。 (其中的键是"casbin_subject")
    visitor := c.Input().Get("casbin_subject")
    // `e`是一个初始化的Casbin Enforcer实例
    c.Data["perm"] = casbin.CasbinJsGetPermissionForUser(e, visitor) 
    // 将数据传到前端
    c.ServeJSON()
}

NOTE 目前 CasbinJsGetPermissionForUser api只支持Go Casbin 和 Node-Casbin。如果您希望这个api支持其它语言，请在此提交issue 或者留下评论。

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)

检查用户是否能在objects对所有对象执行action。

canAny(action: string, objects: Array)

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

为什么选择 Casbin.js

人们可能会想知道Node-Casbin和Casbin.js之间的区别。总的来说，Node-Casbin 是一个用 NodeJS 环境实现的 Casbin 核心，它通常在服务端用作一个访问控制工具包。 Casbin.js 是一个能帮助您在客户端使用Casbin为你网页里的用户授权的前端库。

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

当有人启动客户端时，执行器会被初始化，随后在后端持久层中拉取所有策略。高并发会为数据库带来巨大的压力并带来极高的网络成本。

将所有策略悉数加载进客户端会带来安全风险。

区分客户端和服务器以及灵活的开发有困难。

我们希望有一种能够简化 Casbin 前端开发的工具。实际上，Casbin.js 的核心是在客户端操纵当前用户的权限。正如你提到的，Casbin.js 从一个指定的后端获取数据。这个程序会与 Casbin 后端服务同步用户的权限。取得权限数据之后，开发者可以使用 Casbin.js 提供的接口来在前端管理用户行为。

Casbin.js 避免了以上提及的两个问题：Casbin 服务将不再被反复请求数据，并且客户端与服务端之间传递数据量大大减少我们也避免了将所有的策略都储存在前端的问题。用户仅能操作与之相关的权限，对其它诸如访问控制模型、其他用户的权限的内容将一无所知。此外，Casbin.js 还能有效地在授权管理方面解耦客户端和服务端。