前端使用

前端使用

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