Frontend Usage

Casbin.js adalah addon Casbin yang memudahkan pengurusan kawalan akses anda dalam aplikasi frontend.

Pemasangan

npm install casbin.js
npm install casbin

atau

yarn add casbin.js

Middleware Frontend

Middleware	Jenis	Pengarang	Penerangan
react-authz	React	Casbin	Pembungkus React untuk Casbin.js
rbac-react	React	@daobeng	Kawalan Akses Berbasis Peranan dalam React menggunakan HOCs, CASL dan Casbin.js
vue-authz	Vue	Casbin	Pembungkus Vue untuk Casbin.js
angular-authz	Angular	Casbin	Pembungkus Angular untuk Casbin.js

Mulakan dengan Cepat

Anda boleh menggunakan mod manual dalam aplikasi frontend anda dan menetapkan kebenaran bila-bila masa yang anda inginkan.

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

Sekarang kita mempunyai pengarah, authorizer. Kita boleh mendapatkan peraturan kebenaran daripadanya dengan menggunakan API authorizer.can() dan authorizer.cannot(). Nilai pulangan dari kedua-dua API ini adalah Janji JavaScript (butiran di sini), jadi kita harus menggunakan kaedah then() pada nilai pulangan seperti ini:

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() digunakan dengan cara yang sama:

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

Dalam kod di atas, pemboleh ubah success dalam parameter bermaksud permintaan mendapat hasil tanpa membuang ralat dan tidak bermaksud bahawa peraturan kebenaran adalah true. Pemboleh ubah failed juga tidak berkaitan dengan peraturan kebenaran. Ia hanya masuk akal apabila sesuatu berlaku salah dalam proses permintaan.

Anda boleh merujuk kepada contoh React kami untuk melihat penggunaan praktikal Casbin.js.

Objek Kebenaran

Casbin.js akan menerima objek JSON untuk mengendalikan kebenaran yang sepadan bagi pengunjung. Contohnya:

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

Objek kebenaran di atas menunjukkan bahawa pengunjung boleh membaca objek data1 dan data2, manakala mereka hanya boleh menulis objek data1.

Penggunaan Lanjutan

Casbin.js menyediakan penyelesaian yang sempurna untuk mengintegrasikan pengurusan kawalan akses frontend anda dengan perkhidmatan Casbin backend anda.

Gunakan mod auto dan tentukan titik akhir anda semasa memulakan Authorizer Casbin.js, ia akan secara automatik menyegerakkan kebenaran dan mengendalikan status 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 ...
    }
});

Sesuai dengan itu, anda perlu mendedahkan antara muka (contohnya, RestAPI) untuk menghasilkan objek kebenaran dan menyebarkannya ke frontend. Dalam pengawal API anda, panggil CasbinJsGetUserPermission untuk membina objek kebenaran. Berikut adalah contoh dalam Beego:

nota

Pelayan titik akhir anda harus mengembalikan sesuatu seperti

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

nota

Pada masa ini, API CasbinJsGetPermissionForUser hanya disokong dalam Go Casbin dan Node-Casbin. Jika anda ingin API ini disokong dalam bahasa lain, sila naikkan isu atau tinggalkan komen di bawah.

Senarai API

setPermission(permission: string)

Tetapkan objek kebenaran. Selalu digunakan dalam mod manual.

setUser(user: string)

Tetapkan identiti pengunjung dan kemas kini kebenaran. Selalu digunakan dalam mod auto.

can(action: string, object: string)

Periksa jika pengguna boleh melakukan action pada object.

cannot(action: string, object: string)

Periksa jika pengguna tidak boleh melakukan action pada object.

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

Periksa jika pengguna boleh melakukan action pada semua objek dalam objects.

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

Periksa jika pengguna boleh melakukan action pada sebarang satu daripada objects.

Mengapa Casbin.js

Orang ramai mungkin tertanya-tanya mengenai perbezaan antara Node-Casbin dan Casbin.js. Secara ringkasnya, Node-Casbin adalah teras Casbin yang dilaksanakan dalam persekitaran NodeJS, dan biasanya digunakan sebagai alat pengurusan kawalan akses di hujung pelayan. Casbin.js adalah perpustakaan frontend yang membantu anda menggunakan Casbin untuk membenarkan pengguna halaman web anda di sisi klien.

Biasanya, tidak sesuai untuk membina secara langsung perkhidmatan Casbin dan melakukan tugas pemberian kuasa/penguatkuasaan dalam aplikasi web frontend kerana masalah-masalah berikut:

1. Apabila seseorang menghidupkan klien, enforcer akan diinisialisasi, dan ia akan menarik semua polisi dari lapisan tahanan backend. Kepadatan tinggi boleh membawa tekanan yang kuat ke atas pangkalan data dan menelan kos banyak lewatani rangkaian.
2. Memuatkan semua polisi ke sisi klien boleh membawa risiko keselamatan.
3. Sukar untuk memisahkan klien dan pelayan serta memudahkan pembangunan yang lincah.

Kita memerlukan alat yang memudahkan proses penggunaan Casbin di frontend. Sebenarnya, teras Casbin.js adalah manipulasi kebenaran pengguna semasa di sisi klien. Seperti yang anda sebutkan, Casbin.js melakukan pengambilan dari titik akhir yang ditentukan. Prosedur ini akan menyegerakan kebenaran pengguna dengan perkhidmatan backend Casbin. Selepas mempunyai data kebenaran, pembangun boleh menggunakan antara muka Casbin.js untuk menguruskan tingkah laku pengguna di bahagian frontend.

Casbin.js mengelakkan dua masalah yang dinyatakan di atas: Perkhidmatan Casbin tidak akan lagi ditarik naik berulang kali, dan saiz mesej yang dihantar antara pelanggan dan pelayan dikurangkan. Kami juga mengelakkan menyimpan semua polisi di frontend. Pengguna hanya boleh mengakses kebenaran mereka sendiri, tetapi tidak mempunyai pengetahuan tentang model kawalan akses dan kebenaran pengguna lain. Selain itu, Casbin.js juga boleh memisahkan pelanggan dan pelayan secara cekap dalam pengurusan kebenaran.