Интеграция с фронтендом

Casbin.js приносит контроль доступа в стиле Casbin во фронтенд: определяйте разрешения (например, полученные от вашего бэкенда) и используйте их для показа/скрытия элементов интерфейса или маршрутизации пользователей. Работает в режиме manual (вы устанавливаете разрешения в коде) или auto (получение разрешений из API).

Установка

npm install casbin.js
npm install casbin

или

yarn add casbin.js

Фреймворки фронтенда

Фреймворк	Тип	Автор	Описание
react-authz	React	Casbin	Обертка React для Casbin.js
rbac-react	React	@daobeng	Управление доступом на основе ролей (RBAC) в React с использованием Higher-Order Components, CASL и Casbin.js
vue-authz	Vue	Casbin	Обертка Vue для Casbin.js
angular-authz	Angular	Casbin	Обертка Angular для Casbin.js

Быстрый старт

Настройте 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.can() и authorizer.cannot(). Оба метода возвращают JavaScript Promises (см. документацию MDN), поэтому используйте метод 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

Метод 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 указывает на то, что запрос был выполнен без ошибок — а не на то, что разрешение было предоставлено. Аналогично, failed относится к ошибкам запроса, а не к отказу в предоставлении разрешения.

Смотрите наш пример для React для практического использования Casbin.js.

Permission Object

Casbin.js использует JSON-объект для представления прав доступа посетителя. Например:

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

Этот объект указывает, что посетитель может читать как объекты data1, так и data2, но записывать данные может только в data1.

Advanced Usage

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

На бэкенде создайте конечную точку (например, REST API), которая генерирует объект прав доступа для фронтенда. В вашем контроллере 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()
}

примечание

В настоящее время функция CasbinJsGetPermissionForUser доступна только в Go Casbin и Node-Casbin. Чтобы запросить поддержку в других языках, пожалуйста, создайте issue или оставьте комментарий ниже.

API Reference

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

Часто возникает вопрос о различиях между Node-Casbin и Casbin.js. Node-Casbin — это основная реализация Casbin для среды Node.js, обычно развертываемая на уровне сервера для управления контролем доступа. Casbin.js — это библиотека для фронтенда, которая помогает применять логику авторизации Casbin на стороне клиента для пользователей веб-страниц.

Прямое создание сервиса Casbin для авторизации на фронтенде имеет несколько проблем:

1. При подключении клиента инициализируется энфорсер и загружаются все политики из хранилища на бэкенде. Высокая параллельность может создать нагрузку на базы данных и потреблять значительную пропускную способность сети.
2. Раскрытие всех политик клиентам создает уязвимости безопасности.
3. Тесная связь между клиентом и сервером усложняет разработку и сопровождение.

Casbin.js решает эти проблемы, управляя правами пользователя на уровне клиента. Основная функциональность заключается в синхронизации прав текущего пользователя с бэкенд-сервисом Casbin через операцию fetch. После получения данных о правах разработчики могут использовать интерфейсы Casbin.js для управления поведением пользователя на фронтенде.

Такой подход устраняет необходимость повторной инициализации энфорсера, уменьшает размер сообщений между клиентом и сервером и предотвращает раскрытие всех политик на фронтенде. Пользователи получают доступ только к своим собственным правам, не зная о модели контроля доступа или правах других пользователей. Кроме того, Casbin.js эффективно развязывает логику авторизации на клиенте и сервере.