ACL no Vue 2

Para quem não conhece, 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

Configuração

O próximo passo é realizar a configuração desse plugin, mas antes precisamos ter algumas rotas, por exemplo:

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

No exemplo dado acima usei duas rotas, uma para o administrador e outra para qualquer usuário, notem que usei um metadata chamado permission, dizendo qual permissão precisa estar registrada no sistema para que aquela rota possa ser acessada, para a rota any temos uma ocasião especial, como o administrador e qualquer usuário pode acessa-la então coloco os dois separando-os por um pipe(|).

Note também que temos um metadata opcional, o fail informa qual rota será chamada em caso de falha na permissão da atual.

Agora 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 qual permissão 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.

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

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.

Para ver um exemplo desse plugin funcionando inicie um projeto com um template próprio:

vue init leonardovilarinho/newbie-webpack-simples projeto

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