Concrete Logo
Hamburger button

Perfis de Acesso com AngularJS

  • Blog
  • 17 de Novembro de 2015
Share

Esse post foi originalmente publicado no Medium pessoal do autor. Confira aqui.

Existem diversas formas de implementar perfis de Acesso com AngularJS. Nesse post vou mostrar uma possível abordagem de como restringir ou mostrar certas telas (ou fragmentos delas) para determinados perfis.

Obs.: Esse post assume um conhecimento mínimo do framework AngularJS. Se você ainda não possui esse conhecimento, sugiro primeiro aprender um pouco mais antes de continuar. Este tutorial completo pode te ajudar.

Primeiramente os requisitos do sistema:

  1. Existem os perfis: Admin, Visualização, Modificação e Comum;
  2. Um usuário pode ter mais de um perfil;
  3. Algumas telas e fragmentos de tela podem ter o acesso de mais de um Perfil.

Primeiramente vamos criar nosso controller de autenticação, porque é justamente no login que as informações do perfil do usuário serão passadas pelo back-end para o front-end:

Agora, assumindo que o back-end nos passa um array de perfis relacionados ao usuário que fez o login, vamos adicionar nesse controller uma forma de guardar essa informação por meio de uma Factory:

Precisamos criar agora a estrutura da factory Profile, já com a primeira função que usamos no controller anterior, o setRoles:

Só com isso a factory ainda não tem muita utilidade, vamos incrementá-la para que possamos verificar se o usuário possui determinados perfis de acesso:

Com o que foi construído até agora, já temos uma solução para perfis em fragmentos de telas. Se nós temos uma barra lateral na aplicação, por exemplo, podemos restringir ou mostrar certos links com base no perfil do usuário em questão:

 …

Agora que já possuímos a restrição por fragmentos de tela, vamos construir uma solução para desabilitar (ou liberar) totalmente o acesso aos usuários por meio de rotas. A ideia é usar um resolver nas rotas para fazê-lo.

Primeiro vamos montar nossa estrutura de rotas, para que três possíveis rotas existam: uma tela inicial, uma para admin e uma tela de usuários:

As regras de acesso são:

  1. Tela inicial, de login: todos têm acesso;
  2. Tela para admin: apenas perfil Admin tem acesso;
  3. Tela de usuários: apenas perfis Admin e Modificação tem acesso.

Sabendo disso, vamos criar o resolver nas rotas necessárias e utilizar um serviço, que será implementado futuramente, que irá checar se o usuário possui pelo menos um dos perfis necessários para acessar a rota.

Portando, a nova estrutura ficará assim:

Basta apenas implementar o serviço bem simples RouteAccess, que deverá receber um valor booleano e se for falso (ou seja, o acesso está negado) deve redirecionar o usuário para a página principal:

 …

Com isso, temos toda a estrutura montada para lidar com perfis de acesso com AngularJS. Se você tem uma outra abordagem, por favor indique nos comentários. Não esqueça também de compartilhar o post se você gostou!