Frontend Usage

Casbin.js é um addon do Casbin que facilita a gestão do controle de acesso na aplicação frontend.

Instalação

npm install casbin.js
npm install casbin

ou

yarn add casbin.js

Middlewares Frontend

Middleware	Tipo	Autor	Descrição
react-authz	React	Casbin	Wrapper do React para Casbin.js
rbac-react	React	@daobeng	Controle de Acesso Baseado em Funções no React usando HOCs, CASL e Casbin.js
vue-authz	Vue	Casbin	Wrapper do Vue para Casbin.js
angular-authz	Angular	Casbin	Wrapper do Angular para Casbin.js

Início Rápido

Você pode usar o modo manual na sua aplicação frontend e definir as permissões quando desejar.

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

Agora temos um autorizador, authorizer. Podemos obter regras de permissão dele usando as APIs authorizer.can() e authorizer.cannot(). Os valores de retorno dessas 2 APIs são Promessas JavaScript (detalhes aqui), então devemos usar o método then() do valor de retorno assim:

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

A API cannot() é usada da mesma maneira:

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

No código acima, a variável success nos parâmetros significa que a solicitação obteve o resultado sem lançar um erro e não significa que a regra de permissão é true. A variável failed também não está relacionada às regras de permissão. Ela só faz sentido quando algo dá errado no processo da solicitação.

Você pode se referir ao nosso exemplo React para ver um uso prático do Casbin.js.

Objeto de Permissão

Casbin.js aceitará um objeto JSON para manipular a permissão correspondente de um visitante. Por exemplo:

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

O objeto de permissão acima mostra que o visitante pode read os objetos data1 e data2, enquanto eles só podem write nos objetos data1.

Uso Avançado

Casbin.js oferece uma solução perfeita para integrar a gestão de controle de acesso do frontend com o serviço Casbin do backend.

Use o modo auto e especifique seu endpoint ao inicializar o Authorizer do Casbin.js, ele sincronizará automaticamente a permissão e manipulará o status do 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 ...
    }
});

Correspondentemente, você precisa expor uma interface (por exemplo, uma RestAPI) para gerar o objeto de permissão e passá-lo para o frontend. No seu controlador de API, chame CasbinJsGetUserPermission para construir o objeto de permissão. Aqui está um exemplo em Beego:

nota

Seu servidor de endpoint deve retornar algo como

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

Atualmente, a API CasbinJsGetPermissionForUser só é suportada no Go Casbin e Node-Casbin. Se você quiser que esta API seja suportada em outros idiomas, por favor crie uma issue ou deixe um comentário abaixo.

Lista de APIs

setPermission(permission: string)

Defina o objeto de permissão. Sempre usado em modo manual.

setUser(user: string)

Defina a identidade do visitante e atualize a permissão. Sempre usado em modo auto.

can(action: string, object: string)

Verifique se o usuário pode realizar action em object.

cannot(action: string, object: string)

Verifique se o usuário não pode realizar action em object.

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

Verifique se o usuário pode realizar action em todos os objetos em objects.

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

Verifique se o usuário pode realizar action em qualquer um dos objects.

Por que Casbin.js

As pessoas podem se perguntar sobre a diferença entre Node-Casbin e Casbin.js. Em uma palavra, Node-Casbin é o núcleo do Casbin implementado no ambiente NodeJS, e normalmente é usado como um kit de ferramentas de gerenciamento de controle de acesso nas extremidades do servidor. Casbin.js é uma biblioteca frontend que ajuda você a usar o Casbin para autorizar seus usuários de páginas web no lado do cliente.

Normalmente, não é adequado construir diretamente um serviço Casbin e realizar as tarefas de autorização/execução em um aplicativo de frontend da web devido aos seguintes problemas:

1. Quando alguém liga o cliente, o executor será inicializado, e ele puxará todas as políticas das camadas persistentes do backend. Uma alta concorrência poderia trazer grande pressão sobre os bancos de dados e custar muito em termos de largura de banda de rede.
2. Carregar todas as políticas para o lado do cliente poderia trazer riscos de segurança.
3. É difícil separar o cliente e o servidor, bem como facilitar o desenvolvimento ágil.

Precisamos de uma ferramenta que facilite o processo de usar o Casbin na frontend. Na verdade, o núcleo do Casbin.js é a manipulação da permissão do usuário atual no lado do cliente. Como você mencionou, o Casbin.js faz uma busca de um endpoint especificado. Este procedimento sincronizará a permissão do usuário com o serviço Casbin do backend. Depois de ter os dados de permissão, os desenvolvedores podem usar as interfaces do Casbin.js para gerenciar o comportamento do usuário no lado do frontend.

Casbin.js evita os dois problemas mencionados acima: o serviço Casbin não será mais acionado repetidamente, e o tamanho das mensagens passadas entre o cliente e o servidor é reduzido. Também evitamos armazenar todas as políticas no frontend. O usuário só pode acessar sua própria permissão, mas não tem conhecimento sobre o modelo de controle de acesso e as permissões de outros usuários. Além disso, o Casbin.js também pode desacoplar eficientemente o cliente e o servidor na gestão de autorização.