Перейти к основному контенту

Frontend Usage

Casbin.js - это дополнение к Casbin, которое облегчает управление контролем доступа в приложении на стороне клиента.

Установка

npm install casbin.js
npm install casbin

или

yarn add casbin.js

Промежуточное ПО для фронтенда

Промежуточное ПОТипАвторОписание
react-authzReactCasbinОбертка React для Casbin.js
rbac-reactReact@daobengКонтроль доступа на основе ролей в React с использованием HOCs, CASL и Casbin.js
vue-authzVueCasbinОбертка Vue для Casbin.js
angular-authzAngularCasbinОбертка 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 (подробности здесь), поэтому мы должны использовать метод 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)

Проверьте, может ли пользователь выполнить действие над объектом.

cannot(action: string, object: string)

Проверьте, может ли пользователь не выполнять действие над объектом.

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

Проверьте, может ли пользователь выполнить действие над всеми объектами в objects.

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

Проверьте, может ли пользователь выполнить действие над любым одним из objects.

Почему Casbin.js

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

Обычно неправильно напрямую создавать службу Casbin и выполнять задачи авторизации/принуждения в веб-фронтенд-приложении из-за следующих проблем:

  1. Когда кто-то включает клиент, инициализируется принудитель, и он извлекает все политики из бэкенд-слоев постоянного хранения. Высокая конкуренция может оказать сильное давление на базы данных и стоить большого объема сетевого трафика.
  2. Загрузка всех политик на сторону клиента может создать риски безопасности.
  3. Трудно разделить клиент и сервер, а также облегчить гибкую разработку.

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

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