Frontend Usage

Casbin.js - це доповнення Casbin, яке полегшує управління контролем доступу у фронтенд-додатку.

Інсталяція

npm install casbin.js
npm install casbin

або

yarn add casbin.js

Проміжне програмне забезпечення для фронтенду

Проміжне програмне забезпечення	Тип	Автор	Опис
react-authz	React	Casbin	Обгортка React для Casbin.js
rbac-react	React	@daobeng	Контроль доступу на основі ролей у React за допомогою HOCs, CASL та Casbin.js
vue-authz	Vue	Casbin	Обгортка Vue для Casbin.js
angular-authz	Angular	Casbin	Обгортка Angular для 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, щоб побачити практичне використання Casbin.js.

Об'єкт дозволу

Casbin.js прийме JSON-об'єкт для маніпулювання відповідним дозволом відвідувача. Наприклад:

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

Об'єкт дозволу вище показує, що відвідувач може читати об'єкти data1 та data2, тоді як він може лише писати об'єкти data1.

Розширене використання

Casbin.js надає ідеальне рішення для інтеграції вашого управління контролем доступу фронтенду з вашим бекенд-сервісом Casbin.

Використовуйте режим auto та вкажіть ваш кінцевий пункт при ініціалізації Authorizer Casbin.js, він автоматично синхронізує дозволи та маніпулює статусом фронтенду.

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:

примітка

Ваш сервер кінцевої точки повинен повернути щось на кшталт

{
    "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.

Чому Casbin.js

Люди можуть цікавитися різницею між Node-Casbin та Casbin.js. Одним словом, Node-Casbin - це ядро Casbin, реалізоване в середовищі NodeJS, і зазвичай використовується як набір інструментів для управління доступом на серверному кінці. Casbin.js - це фронтенд бібліотека, яка допомагає вам використовувати Casbin для авторизації користувачів веб-сторінки на стороні клієнта.

Зазвичай, не дуже правильно безпосередньо створювати сервіс Casbin та виконувати завдання авторизації/примусу на фронтенді веб-додатку через наступні проблеми:

Коли хтось увімкне клієнт, ініціалізується примусовий механізм, і він витягне всі політики з бекенду постійних шарів. Висока конкуренція може принести серйозний тиск на бази даних і коштувати багато мережевого трафіку.
Завантаження всіх політик на сторону клієнта може створити ризики безпеки.
Важко розділити клієнт та сервер, а також сприяти гнучкій розробці.

Нам потрібен інструмент, який полегшить процес використання Casbin на фронтенді. Насправді, ядро Casbin.js - це маніпуляція дозволами поточного користувача на стороні клієнта. Як ви згадали, Casbin.js робить запит до вказаного кінцевого пункту. Ця процедура синхронізує дозволи користувача з бекенд сервісом Casbin. Отримавши дані дозволів, розробники можуть використовувати інтерфейси Casbin.js для управління поведінкою користувача на стороні фронтенду.

Casbin.js уникає двох вищезгаданих проблем: сервіс Casbin більше не буде запускатися повторно, і розмір повідомлень, що передаються між клієнтом та сервером, зменшується. Ми також уникаємо зберігання всіх політик на фронтенді. Користувач може отримати доступ лише до своїх дозволів, але не має знань про модель контролю доступу та дозволи інших користувачів. Крім того, Casbin.js також може ефективно розділити клієнт та сервер у управлінні авторизацією.