Jornada Frontend

O que é Route Guards Angular

É uma interface do Angular que faz o meio de campo antes de chamar a rota de fato, seja navegando entre os componentes ou saindo de algum deles.

O route guards (ou rota de guarda), faz a verificação se o usuário pode ou não acessar determinada rota. Um exemplo é quando esquecemos de preencher algum campo obrigatório de um formulário e a página não nos deixa seguir em frente antes de preenchê-lo.

Existem alguns tipos para rota de guarda:

CanActivate – Verifica se o usuário pode acessar a rota;

CanActivateChild – Verifica se o usuário pode visitar uma rota filha;

CanDeactivate – Verifica se o usuário pode sair da rota;

CanLoad – Verifica se o usuário pode utilizar lazy loaded.

Route Guards Angular Mão na massa

Para iniciar um projeto de guards vamos ao básico:

ng generate component home

ng generate component user

Geramos dois componentes, o home e o user. Até aqui sem novidades.

Vou deixar as rotas pré prontas aqui também:

E no app component, vamos colocar o home e o user:

CanActivate rota de guarda

O CLI consegue nos prover uma maneira simples de gerar o guard.

ng generate guard nome_que_vc_quiser

Podemos colocar qualquer nome para o nosso guard, mas lembre-se de usar a palavra reservada no ng generate guard.

Mas vamos criar um guard para o user:

ng generate guard user

Vai ser feito a pergunta de qual interface queremos usar, vamos começar com o canActive, ele é o default do CLI, então apenas confirme.

Abrindo o arquivo do guards o user.guard.ts, vamos nos deparar com o seguinte código:

Vale lembrar que ele pode tanto retornar uma Promise<boolean> como um Objectable<boolean>, caso o retorno da rota seja true ele pode acessar e caso seja false será negativo o acesso a ela.

Caso o retorno seja negativo, vamos redirecionar o usuário para a página de home.

Não podemos esquecer de importar o guard no NgModule, dentro do app.module.

Ainda dentro do app.module, devemos dizer ao Angular em quais rotas queremos usar o guard e a sintaxe para isso é a seguinte:

Vamos usar o guard no /user, então vamos deixar já no esquema:

Em todo caso, como o nosso guard está retornando true sempre, ele não faz diferença alguma, mas para testa-lo vamos deixar o retorno como falso e ver como o guard se comporta.

CanActivateChild rota de guarda

CanActivatechildguarda é muito parecida com CanActivateGuard. Aplicamos essa guarda à rota pai. O Angular invoca esse guarda sempre que o usuário tenta navegar para qualquer uma de suas rotas filhas. Isso nos permite verificar alguma condição e decidir se devemos prosseguir com a navegação ou cancelá-la.

Sabe quando criamos rotas filhas dentro de um determinado escopo? Então, este camarada vai nos ajudar à proteger todas elas.

CanDeactive rota de guarda

É com ele que garantimos que algo seja feito antes do usuário sair da rota, um exemplo real é quando preenchemos um formulário e no meio dele decidimos sair da página, podemos deixar configurado para o componente perguntar se realmente ele quer sair dessa rota sem salvar os dados ou mudar alguma informação da conta e não apertamos o botão de salvar, são esses tipos de situações que podemos usar o CanDeactive.

Padrão CLI para criar ele:

ng generate guard user-exit

Não podemos esquecer de selecionar o CanDeactive no prompt, mesma coisa do CanActive, só que agora iremos usar o CanDeactive, então atenção nessa parte.

Vamos abrir o arquivo e dar uma olhada nele:

Vamos criar uma lógica falsa para o usuário confirmar se ele realmente quer sair da rota. Vai aparecer um pop-up para ele confirmar.

Como essa lógica está dentro do “user”, não podemos esquecer de importa-lo, são esses pequenos detalhes de import, que as vezes dão erro em nossa aplicação e acabamos batendo cabeça atoa, então sempre temos que ter atenção a isso.

Fizemos o import do UserComponent com a nossa lógica falsa, um ponto que vale ressaltar é o seguinte, dentro do canDeactivate temos o parâmetro component, que nada mais é onde iremos colocar o componente onde está a nossa lógica.

Agora só falta colocar dentro do app.module e dizer em qual rota vamos usar o canDeactivate.

Se você testar e acessar a página “/user” e tentar sair dela, irá aparecer nosso pop-up perguntando se você tem certeza.

CanLoad rota de guarda

CanLoad impede o carregamento Lazy load. Geralmente utilizamos esse guarda quando não queremos que usuário não autorizado navegue para nenhuma das rotas do módulo e também pare depois até mesmo.

O Angular disponibiliza o canActivate, que impede que usuários não autorizados acessem a rota. Mas isso não impede que o módulo seja baixado. 

O usuário pode usar o console do desenvolvedor do Chrome para ver o código-fonte. O CanLoad impede que o módulo seja baixado.

Este método deve retornar true ou false. O Angular avalia canLoad e carrega o Lazy Load somente se retornar true.

Conclusão

Agora temos várias possibilidades de lidar com pequenos problemas que possam acessar rotas ou sair delas, poderiam gerar.

Como o Angular é extremamente robusto, temos maneiras de lidar com as coisas de forma excelente, como sair da rota sem salvar dados ou carregar dados externos primeiro.

Summary
O que é Route Guards Angular
Article Name
O que é Route Guards Angular
Description
O que é Route Guards Angular? Como o Angular é extremamente robusto, temos maneiras de lidar com as coisas de forma excelente.
Author
Publisher Name
Vida Full Stack
Publisher Logo

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This