Frontend Usage

Casbin.js là một tiện ích mở rộng của Casbin giúp quản lý kiểm soát truy cập trong ứng dụng frontend.

Cài đặt

npm install casbin.js
npm install casbin

hoặc

yarn add casbin.js

Middleware phía Frontend

Middleware	Loại	Tác giả	Mô tả
react-authz	React	Casbin	Wrapper React cho Casbin.js
rbac-react	React	@daobeng	Kiểm soát truy cập dựa trên vai trò trong React sử dụng HOCs, CASL và Casbin.js
vue-authz	Vue	Casbin	Wrapper Vue cho Casbin.js
angular-authz	Angular	Casbin	Wrapper Angular cho Casbin.js

Bắt đầu nhanh

Bạn có thể sử dụng chế độ manual trong ứng dụng frontend của mình và đặt quyền hạn bất cứ khi nào bạn muốn.

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

Bây giờ chúng ta có một trình uỷ quyền, authorizer. Chúng ta có thể lấy các quy tắc quyền từ nó bằng cách sử dụng các API authorizer.can() và authorizer.cannot(). Giá trị trả về của 2 API này là JavaScript Promises (chi tiết tại đây), vì vậy chúng ta nên sử dụng phương thức then() của giá trị trả về như thế này:

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

API cannot() được sử dụng theo cách tương tự:

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

Trong đoạn mã trên, biến success trong tham số có nghĩa là yêu cầu nhận được kết quả mà không gây ra lỗi và không có nghĩa là quy tắc quyền là true. Biến failed cũng không liên quan đến các quy tắc quyền. Nó chỉ có ý nghĩa khi có điều gì đó sai trong quá trình yêu cầu.

Bạn có thể tham khảo ví dụ về React của chúng tôi để xem một ứng dụng thực tế của Casbin.js.

Đối tượng Quyền

Casbin.js sẽ chấp nhận một đối tượng JSON để thao tác quyền tương ứng của người truy cập. Ví dụ:

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

Đối tượng quyền ở trên cho thấy người truy cập có thể đọc các đối tượng data1 và data2, trong khi họ chỉ có thể ghi các đối tượng data1.

Sử dụng Nâng cao

Casbin.js cung cấp một giải pháp hoàn hảo cho việc tích hợp quản lý kiểm soát truy cập frontend của bạn với dịch vụ Casbin backend của bạn.

Sử dụng chế độ tự động và chỉ định điểm cuối của bạn khi khởi tạo Authorizer của Casbin.js, nó sẽ tự động đồng bộ hóa quyền và thao tác trạng thái frontend.

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

Tương ứng, bạn cần phải cung cấp một giao diện (ví dụ: một RestAPI) để tạo đối tượng quyền và truyền nó đến frontend. Trong bộ điều khiển API của bạn, gọi CasbinJsGetUserPermission để xây dựng đối tượng quyền. Đây là một ví dụ trong Beego:

ghi chú

Máy chủ endpoint của bạn nên trả về một cái gì đó như

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

ghi chú

Hiện tại, API CasbinJsGetPermissionForUser chỉ được hỗ trợ trong Go Casbin và Node-Casbin. Nếu bạn muốn API này được hỗ trợ trong các ngôn ngữ khác, vui lòng tạo một issue hoặc để lại bình luận bên dưới.

Danh sách API

`setPermission(permission: string)`

Đặt đối tượng quyền. Luôn được sử dụng trong chế độ manual.

`setUser(user: string)`

Đặt danh tính của người truy cập và cập nhật quyền. Luôn được sử dụng ở chế độ auto.

`can(action: string, object: string)`

Kiểm tra xem người dùng có thể thực hiện action trên object hay không.

`cannot(action: string, object: string)`

Kiểm tra xem người dùng không thể thực hiện action trên object.

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

Kiểm tra xem người dùng có thể thực hiện action trên tất cả các đối tượng trong objects hay không.

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

Kiểm tra xem người dùng có thể thực hiện action trên bất kỳ một trong các objects hay không.

Tại sao lại là Casbin.js

Mọi người có thể tự hỏi về sự khác biệt giữa Node-Casbin và Casbin.js. Nói một cách ngắn gọn, Node-Casbin là lõi của Casbin được triển khai trong môi trường NodeJS, và nó thường được sử dụng như một công cụ quản lý kiểm soát truy cập ở phía máy chủ. Casbin.js là một thư viện phía frontend giúp bạn sử dụng Casbin để ủy quyền cho người dùng trang web của bạn ở phía client.

Thông thường, không phù hợp để xây dựng trực tiếp một dịch vụ Casbin và thực hiện các nhiệm vụ ủy quyền/thực thi tại ứng dụng web frontend do những vấn đề sau:

Khi ai đó bật client, enforcer sẽ được khởi tạo và nó sẽ kéo tất cả các chính sách từ các lớp lưu trữ backend. Một sự gia tăng đồng thời cao có thể gây áp lực lớn lên các cơ sở dữ liệu và tốn rất nhiều băng thông mạng.
Tải tất cả các chính sách lên phía client có thể gây ra những rủi ro về an ninh.
Khó khăn trong việc tách biệt client và server cũng như tạo điều kiện cho phát triển linh hoạt.

Chúng ta cần một công cụ giúp đơn giản hóa quá trình sử dụng Casbin ở phía frontend. Thực tế, lõi của Casbin.js là việc thao tác với quyền hiện tại của người dùng ở phía client. Như bạn đã đề cập, Casbin.js thực hiện một yêu cầu từ một điểm cuối được chỉ định. Quy trình này sẽ đồng bộ hóa quyền của người dùng với dịch vụ backend Casbin. Sau khi có dữ liệu quyền, các nhà phát triển có thể sử dụng các giao diện Casbin.js để quản lý hành vi của người dùng ở phía frontend.

Casbin.js tránh được hai vấn đề đã đề cập ở trên: Dịch vụ Casbin sẽ không còn bị kéo lên lặp đi lặp lại, và kích thước của các thông điệp truyền giữa máy khách và máy chủ được giảm đi. Chúng tôi cũng tránh việc lưu trữ tất cả các chính sách ở phía frontend. Người dùng chỉ có thể truy cập vào quyền của chính họ, nhưng không biết gì về mô hình kiểm soát truy cập và quyền của người dùng khác. Bên cạnh đó, Casbin.js cũng có thể hiệu quả tách biệt máy khách và máy chủ trong quản lý ủy quyền.