Frontend Usage

Casbin.js adalah addon Casbin yang memudahkan manajemen kontrol akses Anda dalam aplikasi frontend.

Instalasi

npm install casbin.js
npm install casbin

atau

yarn add casbin.js

Middleware Frontend

Middleware	Tipe	Penulis	Deskripsi
react-authz	React	Casbin	Pembungkus React untuk Casbin.js
rbac-react	React	@daobeng	Kontrol Akses Berbasis Peran di 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

Mulai Cepat

Anda dapat menggunakan mode manual di aplikasi frontend Anda dan mengatur izin kapan saja 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 memiliki otorisator, authorizer. Kita dapat mendapatkan aturan izin dari itu dengan menggunakan API authorizer.can() dan authorizer.cannot(). Nilai kembalian dari kedua API ini adalah JavaScript Promises (detail di sini), jadi kita harus menggunakan metode then() dari nilai kembalian 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 kode di atas, variabel success dalam parameter berarti permintaan mendapatkan hasil tanpa melempar kesalahan dan tidak berarti bahwa aturan izin adalah true. Variabel failed juga tidak terkait dengan aturan izin. Ini hanya masuk akal ketika ada yang salah dalam proses permintaan.

Anda dapat merujuk ke contoh React kami untuk melihat penggunaan praktis Casbin.js.

Objek Izin

Casbin.js akan menerima objek JSON untuk memanipulasi izin yang sesuai dengan pengunjung. Contohnya:

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

Objek izin di atas menunjukkan bahwa pengunjung dapat membaca objek data1 dan data2, sedangkan mereka hanya dapat menulis objek data1.

Penggunaan Lanjutan

Casbin.js menyediakan solusi yang sempurna untuk mengintegrasikan manajemen akses-kontrol frontend Anda dengan layanan backend Casbin Anda.

Gunakan mode auto dan tentukan titik akhir Anda saat menginisialisasi Authorizer Casbin.js, ini akan secara otomatis menyinkronkan izin dan memanipulasi 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 ...
    }
});

Sejalan dengan itu, Anda perlu mengekspos antarmuka (misalnya RestAPI) untuk menghasilkan objek izin dan meneruskannya ke frontend. Di pengontrol API Anda, panggil CasbinJsGetUserPermission untuk membangun objek izin. Berikut adalah contoh dalam Beego:

catatan

Server endpoint Anda seharusnya 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()
}

catatan

Saat ini, API CasbinJsGetPermissionForUser hanya didukung di Go Casbin dan Node-Casbin. Jika Anda ingin API ini didukung dalam bahasa lain, silakan ajukan masalah atau tinggalkan komentar di bawah.

Daftar API

setPermission(permission: string)

Atur objek izin. Selalu digunakan dalam mode manual.

setUser(user: string)

Atur identitas pengunjung dan perbarui izin. Selalu digunakan dalam mode auto.

can(action: string, object: string)

Periksa apakah pengguna dapat melakukan action pada object.

cannot(action: string, object: string)

Periksa apakah pengguna tidak dapat melakukan action pada object.

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

Periksa apakah pengguna dapat melakukan action pada semua objek dalam objects.

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

Periksa apakah pengguna dapat melakukan action pada salah satu dari objects.

Mengapa Casbin.js

Orang-orang mungkin bertanya-tanya tentang perbedaan antara Node-Casbin dan Casbin.js. Singkatnya, Node-Casbin adalah inti dari Casbin yang diimplementasikan dalam lingkungan NodeJS, dan biasanya digunakan sebagai toolkit manajemen kontrol akses di ujung server. Casbin.js adalah pustaka frontend yang membantu Anda menggunakan Casbin untuk mengotorisasi pengguna halaman web Anda di sisi klien.

Biasanya, tidak tepat untuk langsung membangun layanan Casbin dan melakukan tugas otorisasi/penegakan di aplikasi web frontend karena masalah-masalah berikut:

1. Ketika seseorang menyalakan klien, enforcer akan diinisialisasi, dan akan menarik semua kebijakan dari lapisan persisten backend. Konkurensi tinggi dapat memberikan tekanan yang keras pada database dan menghabiskan banyak throughput jaringan.
2. Memuat semua kebijakan ke sisi klien dapat membawa risiko keamanan.
3. Sulit untuk memisahkan klien dan server serta memudahkan pengembangan yang lincah.

Kita membutuhkan alat yang mempermudah proses penggunaan Casbin di frontend. Sebenarnya, inti dari Casbin.js adalah manipulasi izin pengguna saat ini di sisi klien. Seperti yang Anda sebutkan, Casbin.js melakukan fetch dari endpoint yang ditentukan. Prosedur ini akan menyinkronkan izin pengguna dengan layanan backend Casbin. Setelah memiliki data izin, pengembang dapat menggunakan antarmuka Casbin.js untuk mengelola perilaku pengguna di sisi frontend.

Casbin.js menghindari dua masalah yang disebutkan di atas: layanan Casbin tidak akan ditarik secara berulang, dan ukuran pesan yang dilewatkan antara klien dan server dikurangi. Kami juga menghindari menyimpan semua kebijakan di frontend. Pengguna hanya dapat mengakses izin mereka sendiri, tetapi tidak mengetahui tentang model kontrol akses dan izin pengguna lain. Selain itu, Casbin.js juga dapat secara efisien memisahkan klien dan server dalam manajemen otorisasi.