ACL no Vue 2

Para quem não conhece, a sigla ALC vem do inglês ‘Acess Control List’, em tradução direta seria nossa Lista de Controle de Acesso, para um backender como eu, é essencial que um sistema tenha uma ACL em seu escopo, se você ainda está na dúvida se deve aderir, listo a seguir seus objetivos:

• Bloquear rotas de acordo com o usuário.
• Mudar o layout do sistema de acordo com o usuário.

Visando isso, e pesquisando, vi que o Vue não tem nada pronto para suprir essa necessidade que muitos tem, então assim como a multi linguagem, eu resolvi criar minha própria solução. O resultado foi um plugin que te deixa manipular o layout e o acesso a rotas de acordo com a permissão atual registrada no sistema.

Instalação

O plugin pode ser instalado por npm como dependência do projeto assim como o Vuex e vue-router, para isso execute o seguinte comando:

npm install vue-acl --save

Para fazer o uso desse plugin precisaremos do vue-router instalado como dependência, caso você ainda não tenha feito isso, então faça:

npm install vue-router --save

Criando rotas

Para iniciar, precisamos criar as rotas do sistema, definindo em um metadata quais permissões o usuário deve ter para acessa-la:

{
  path: '/adm',
  component: Adm,
  meta: {
    permission: 'adm',
    fail: '/any'
  }
},
{
  path: '/any',
  component: Any,
  meta: {
    permission: 'adm|any'
  }
}

Além disso, na versão mais recente do plugin, temos algumas novidades, como:

• o metadata opcional fail, que tem o objetivo de informar qual rota será chamada em caso de falha na permissão da atual.

• suporte a multi permissões, onde podemos usar um e comercial (&) para declarar que uma rota deve ter duas permissões obrigatórias para ser acessada, Exemplo: 'list&create|admin', para que a rota seja liberada apenas para adiministradores, ou usuários com list E create.

Registrando plugin no Vue

Após criar as rotas usando o padrão do vue-acl, devemos importar o plugin para o Vue, passando como parâmetro uma permissão padrão e o router do vue-router para que ele possa manipular as rotas:

import Acl from 'vue-acl'
Vue.use( Acl, {router: Router, init: 'any'} )

Manipulando o layout

Um dos principais benefícios é poder com facilidade ocultar informações de acordo com a permissão ativa no sistema, para isso temos o método global $can():

<p v-show="$can('adm')">ADM está logado<p>
<p v-show="$can('adm|any')">Qualquer está logado<p>

Enviamos por parâmetro quais permissões deve-se ter para que aquele elemento seja exibido, no exemplo acima, quando a permissão ativa é do administrador será exibido na tela as duas mensagens, quando a permissão ser any será mostrada apenas a segunda mensagem.

Na nova versão do plugin, ainda podemos usar o &, para indicar que o elemento só será visível se e somente se o usuário ativo tiver as duas permissões.

Alterando permissão atual

Ás vezes precisamos trocar a permissão atual ativa no sistema, um exemplo disso é que quando não temos nenhum usuário logado no sistema precisaremos de uma permissão any, mas quando um administrador entrar então a permissão ativa deve ser mudada para adm, para fazer isso usamos o método global $access(), assim:

this.$access('adm') // adm será nossa nova permissão ativa

Ou com a nova versão, passando um array para definir múltiplas permissões, exemplo:

this.$access(['edit', 'delete'])

Considerações

Finalizando esse pequeno artigo, deixo minha vontade que alguém seja ajudado com o mesmo.

Vale ressaltar que ao acessar uma rota como por exemplo /adm sendo any nossa permissão ativa, a rota não será carregada, desde que definimos nas rotas que apenas adm tem acesso a esse local.

Por fim deixo o link do repositório no GitHub, caso queira contribuir, basta dar um fork, realizar suas melhorias e me enviar um pull request.

Espero que tenho gostado desse primeiro post que consegui elaborar, caso tenham críticas é só deixar um comentário ;)