Perfis de Acesso com AngularJS

Existem diversas formas de implementar Perfis de Acesso com AngularJS. Nesse post mostrarei 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 através 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. Por exemplo, se nós temos uma barra lateral na aplicação, 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 tem 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 o 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.


Se você gostou do post não se esqueça de dar um ❤ aqui embaixo!
E se quiser receber de antemão mais posts como esse,
assine nossa newsletter.

JSCasts

É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente criamos o JSCasts, onde você vai se manter em dia com o JavaScript e todo o seu ecossistema de forma fácil e interativa.

Cursos:

Obrigado por ler! ❤