Artigos Rem soft Sistemas

Angular – Guards e Resolvers: Segurança e Gerenciamento de Rotas

 

Laravel Routes

 

Na atualidade a segurança possui um papel muito importante nas aplicações web. Neste artigo vamos explorar maneiras para proteger e gerenciar nossas rotas através dos GuardsResolvers, recursos de implementação simples, porém poderosos.

Essas implementações. além de adicionar uma camada de proteção e gerenciamento das rotas, também contribuem para a legibilidade do código e facilitam a manutenibilidade.

O que são Guards?

Os Guards são meios de evitar que os usuários acessem partes da aplicação para as quais não possuem autorização, proporcionando controle sobre o acesso às rotas.

Alguns tipos de Guards para as rotas no Angular incluem:

  • canActivate
  • canActivateChild
  • canDeactivate
  • canLoad
  • canMatch
  • resolve

Os Guards são mecanismos de segurança que controlam o acesso às rotas, verificando se o usuário possui permissão para acessar uma determinada rota antes de permitir a navegação.

Caso o usuário tenha permissão (ou seja, se o retorno do Guard for true), a navegação para a rota solicitada é permitida. Se o usuário não tiver a permissão, a navegação é cancelada e o usuário será redirecionado para uma rota alternativa.

Exemplo de um Guard

A lógica dos Guards são semelhantes, você deve escolher a interface que melhor se encaixar no seu contexto. No exemplo a seguir, vamos implementar o tipo CanActive.

Para criar um Guard usamos o comando:

ng generate guard [name]

ou

ng generate g [name]

Interface do Guard canActiveFn

canActivate Interface

Como podemos ver o Guard pode conter mais de um tipo de retorno, neste caso podemos retornar:

  • Um Observable do tipo boolean ou UrlTree
  • Uma Promise do tipo boolean ou UrlTree
  • Retornar um boolean
  • Retornar uma UrlTree

Implementação do canActiveFn

canActivateFn Exemplo

Nesta implementação temos uma condição, onde se, myCondition for false, retornamos uma UrlTree, e o usuário é direcionado para a página deste UrlTree.

Caso myCondition seja true, retornamos true, e o usuário continua com a navegação esperada.

Implementação do canActive em uma rota

implementação do canActive nas rotas

Resolvers

Os Resolvers, trabalham com um provedor de dados durante a navegação. Isso significa que os dados devem ser “resolvidos” antes de ativar a rota e prosseguir com a navegação. Se os dados forem resolvidos (ou seja, encontrar os dados solicitados), a navegação para a rota solicitada é permitida. Mas se os dados não forem “resolvidos”, a navegação para a rota solicitada é cancelada, direcionando o usuário para uma rota alternativa.

Para criar um Resolver usamos o comando

ng generate resolver [name]

ou

ng generate r [name]

Interface de um Resolver

resolver interface

Um Resolver pode conter mais de um tipo de retorno, neste caso podemos retornar:

  • Um Observable de tipo generic
  • Uma Promise de tipo genericc
  • Um tipo generic

Exemplo do resolver

Exemplo de resolver

Podemos ver que, no caso em que o usuário é encontrado a navegação continua, caso o usuário não seja encontrado, o redirecionamento ocorre para a rota error-url, e a função retorna null.

Implementação do canActive em uma rota

Implementação do resolver na rota

 

Conclusão

A segurança é uma parte crucial no desenvolvimento WEB, e o Angular oferece diversas formas de proteger e gerenciar rotas, além de separar as responsabilidades deixando o código mais legível e de fácil manutenção.

Falamos sobre tipos de Guards e Resolvers, mostrando interfaces e exemplos genéricos de implementação. A implementação desses recursos é simples e muito útil, prevenindo acessos não autorizados e tratando possíveis erros ao acessar páginas sem dados.

Experimente os tipos mencionados, teste todos e escolha os conceitos mais adequados ao contexto do seu projeto.

 

Você pode encontrar um exemplo (live preview) abaixo:

 

Referências

Angular – @angular/router

Common routing tasks • Angular

Routes Access Controlled by Angular Guards – DEV Community

Como proteger suas rotas – Angular Guard CanActivate (consolelog.com.br)

Using Angular Resolver to Pre Load Data | by Redin Gaetan | Medium

Escrito por:

Está gostando do conteúdo? Compartilhe!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Recentes

Como a Transformação Digital Está Moldando o Futuro dos Negócios

A transformação digital não é mais uma opção, mas uma necessidade para empresas que desejam se manter competitivas no mercado atual. À medida que a tecnologia avança rapidamente, empresas de todos os setores estão adotando soluções digitais para melhorar suas operações, aumentar a eficiência e oferecer melhores experiências aos clientes.

Leia Mais »

MongoDB: uma introdução ao mundo NoSQL

  No contexto de tecnologias, é importante sempre ter em mente duas características fundamentais da área: Primeiramente, quando uma tecnologia é bem aplicada e obtém sucesso, há uma tendência de expansão do seu uso, com isso, mais explorada e desenvolvida,  naturalmente as aplicações exigem cada vez mais dessa tecnologia. Em

Leia Mais »

Python: Analisando Dados E Criando Gráficos

  Nos últimos anos, a análise de dados tornou-se um dos pilares fundamentais das estratégias de grandes empresas em todo o mundo. À medida que a quantidade de informações disponíveis continua a crescer exponencialmente, a capacidade de extrair insights significativos desses dados se tornou uma vantagem competitiva crucial. Nesse contexto, a linguagem

Leia Mais »

Dominando os recursos de relacionamentos eloquent do Laravel

Introdução Nos bastidores de qualquer aplicativo Laravel poderoso está o Eloquent ORM, uma ferramenta que não só simplifica drasticamente a interação com o banco de dados, mas também abre as portas para uma arquitetura de aplicativos mais organizada e flexível. Entre os vários tesouros que o Eloquent oferece, destaca-se o

Leia Mais »

Sobre o Autor

Mais sobre tecnologia

Gostou do Artigo?

Recebemos sua Assinatura com Sucesso!

Obrigado por assinar nossa newsletter!

Enviamos um e-mail para você confirmar sua assinatura, assim que confirmar passará a receber novidades em tecnologia da Rem Soft Sistemas.

Lembre-se sempre se caso não receber nosso e-mail na caixa de entrada,
Observe sua caixa de spam em seu e-mail.