Frontend Usage

Casbin.js เป็นส่วนเสริมของ Casbin ที่ช่วยให้คุณจัดการการควบคุมการเข้าถึงได้ง่ายขึ้นในแอปพลิเคชันส่วนหน้า

การติดตั้ง

npm install casbin.js
npm install casbin

หรือ

yarn add casbin.js

มิดเดิลแวร์สำหรับส่วนหน้า

มิดเดิลแวร์	ประเภท	ผู้เขียน	คำอธิบาย
react-authz	React	Casbin	React wrapper สำหรับ Casbin.js
rbac-react	React	@daobeng	การควบคุมการเข้าถึงตามบทบาทใน React โดยใช้ HOCs, CASL และ Casbin.js
vue-authz	Vue	Casbin	Vue wrapper สำหรับ Casbin.js
angular-authz	Angular	Casbin	Angular wrapper สำหรับ Casbin.js

เริ่มต้นอย่างรวดเร็ว

คุณสามารถใช้โหมด 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 เราสามารถรับกฎการอนุญาตจากมันโดยใช้ API authorizer.can() และ authorizer.cannot() ค่าที่คืนมาของทั้ง 2 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

API cannot() ใช้ในลักษณะเดียวกัน:

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 example ของเราเพื่อดูการใช้งาน Casbin.js อย่างปฏิบัติ

วัตถุสิทธิ์การเข้าถึง

Casbin.js จะยอมรับวัตถุ JSON เพื่อจัดการสิทธิ์การเข้าถึงที่สอดคล้องกับผู้เยี่ยมชม ตัวอย่างเช่น:

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

วัตถุสิทธิ์การเข้าถึงด้านบนแสดงว่าผู้เยี่ยมชมสามารถ read วัตถุ data1 และ data2 ได้ ในขณะที่พวกเขาสามารถ write เฉพาะวัตถุ data1

การใช้งานขั้นสูง

Casbin.js ให้โซลูชันที่สมบูรณ์แบบสำหรับการรวมการจัดการการควบคุมการเข้าถึงส่วนหน้าของคุณกับบริการ Casbin ด้านหลัง

ใช้โหมด auto และระบุ endpoint ของคุณเมื่อเริ่มต้นใช้งาน 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:

หมายเหตุ

เซิร์ฟเวอร์ endpoint ของคุณควรคืนค่าบางอย่างเช่น

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

หมายเหตุ

ปัจจุบัน, API CasbinJsGetPermissionForUser ได้รับการสนับสนุนเฉพาะใน Go Casbin และ Node-Casbin หากคุณต้องการให้ API นี้ได้รับการสนับสนุนในภาษาอื่นๆ, กรุณายื่นปัญหา หรือฝากความคิดเห็นด้านล่าง

รายการ API

setPermission(permission: string)

ตั้งค่าวัตถุสิทธิ์การเข้าถึง มักใช้ในโหมด manual

setUser(user: string)

ตั้งค่าตัวตนของผู้เยี่ยมชมและอัปเดตสิทธิ์การเข้าถึง มักใช้ในโหมด auto

can(action: string, object: string)

ตรวจสอบว่าผู้ใช้สามารถทำ action กับ object ได้หรือไม่

cannot(action: string, object: string)

ตรวจสอบว่าผู้ใช้ ไม่สามารถ ทำ action กับ object

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

ตรวจสอบว่าผู้ใช้สามารถทำ action กับ ทุก ออบเจ็กต์ใน objects

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

ตรวจสอบว่าผู้ใช้สามารถทำ action กับ อย่างน้อยหนึ่ง ใน objects

Why 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 เป็นไลบรารีฝั่ง frontend ที่ช่วยให้คุณใช้ Casbin เพื่ออนุญาตผู้ใช้เว็บเพจของคุณที่ฝั่ง client

ปกติแล้วไม่เหมาะสมที่จะสร้างบริการ Casbin ขึ้นโดยตรงและทำงานด้านการอนุญาต/การบังคับใช้ที่แอปพลิเคชันเว็บ frontend เนื่องจากปัญหาต่อไปนี้:

1. เมื่อมีคนเปิด client, enforcer จะถูกเริ่มต้น, และมันจะดึงนโยบายทั้งหมดจากชั้น backend ที่มีการเก็บข้อมูลอย่างต่อเนื่อง ความพร้อมใช้งานสูงอาจนำมาซึ่งความกดดันที่รุนแรงต่อฐานข้อมูลและใช้ทรัพยากรเครือข่ายมากมาย
2. การโหลดนโยบายทั้งหมดไปยังฝั่ง client อาจนำมาซึ่งความเสี่ยงด้านความปลอดภัย
3. มันยากที่จะแยก client และ server ออกจากกันและส่งเสริมการพัฒนาแบบคล่องตัว

เราต้องการเครื่องมือที่ทำให้กระบวนการใช้ Casbin ที่ฝั่ง frontend ง่ายขึ้น จริงๆ แล้ว แก่นหลักของ Casbin.js คือการจัดการสิทธิ์ของผู้ใช้ปัจจุบันที่ฝั่ง client ตามที่คุณได้กล่าวไว้, Casbin.js ทำการดึงข้อมูลจาก endpoint ที่ระบุ ขั้นตอนนี้จะทำการซิงค์สิทธิ์ของผู้ใช้กับบริการ Casbin ที่ฝั่ง backend หลังจากได้ข้อมูลสิทธิ์แล้ว นักพัฒนาสามารถใช้ interfaces ของ Casbin.js เพื่อจัดการพฤติกรรมของผู้ใช้ที่ฝั่ง frontend

Casbin.js หลีกเลี่ยงปัญหาสองประการที่กล่าวมาข้างต้น: บริการ Casbin จะไม่ถูกเรียกขึ้นซ้ำๆ อีกต่อไป และขนาดของข้อความที่ส่งผ่านระหว่าง client และ server ลดลง เรายังหลีกเลี่ยงการเก็บนโยบายทั้งหมดที่ฝั่ง frontend ผู้ใช้สามารถเข้าถึงเฉพาะสิทธิ์ของตนเองได้เท่านั้น แต่ไม่มีความรู้เกี่ยวกับโมเดลการควบคุมการเข้าถึงและสิทธิ์ของผู้ใช้อื่น นอกจากนี้ Casbin.js ยังสามารถแยกการจัดการการอนุญาตระหว่าง client และ server ได้อย่างมีประสิทธิภาพ