Como usar a Guarda de Rotas Funcional em Angular?

Neste artigo, exploraremos essa transição, analisando como as guardas de rotas funcionais em Angular, representadas por funções, simplificaram a maneira de controlar o acesso a rotas em suas aplicações.

Vamos compreender como essa abordagem simplificada impacta o desenvolvimento e oferece uma nova perspectiva sobre como garantir a segurança das páginas em suas aplicações Angular.

Como usar a guarda de rotas funcional em Angular?

Ao trabalhar com Angular, as guardas de rotas são mecanismos que permitem controlar o acesso em uma aplicação, protegendo determinadas rotas, verificando se um usuário tem permissão para acessá-las.

Até a versão 14 do Angular, as guardas de rotas eram implementadas por meio de classes que incorporavam interfaces fornecidas pela estrutura e habilitavam o controle do acesso com base nos métodos presentes na classe. Essa classe ficava parecida com o exemplo a seguir:

Nesse exemplo de guarda de rotas, há uma estrutura de classe com o decorator @Injectable(), que utilizava a interface canActivate para implementação. Essa classe possui um construtor que geralmente receberá a injeção de Router e de algum serviço que faça a verificação de acesso necessária para aquela rota determinada.

Nesse exemplo, estamos trabalhando com uma guarda de rotas para uma rota que só pode ser acessada após a pessoa usuária fazer login, portanto, tivemos que injetar um serviço que traz a informação de login da pessoa usuária nessa guarda de rotas.

Ainda, um método (nesse caso, canActivate) será chamado quando estivermos tentando acessar nossa página. Se o método retorna true, tudo está correto, e a pessoa usuária pode acessar a página. Se retornar falso, não conseguirá acessar a página, como podemos observar no exemplo a seguir:

No app module, adicionamos o authGuard aos providers e na constante que definimos com nossas rotas no arquivo app-routing.module.ts, adicionamos o canActivate: [ authGuard ] a rota que queremos proteger, logo após a definição do path e do component.

A partir do Angular 15, as classes como guardas de rotas se tornaram obsoletas, como podemos verificar na documentação do Angular - DeprecatedGuard.

DeprecatedGuard(Guard obsoleta):

As classes InjectionToken e @Injectable para guardas e resolvedores foram descontinuadas em favor de funções JavaScript simples. A injeção de dependência ainda pode ser obtida usando a função inject de @angular/core e uma classe injetável pode ser usada como uma guarda funcional usando inject: canActivate: [() => inject(myGuard).canActivate()].

Em outras palavras, nesse método, as funções desempenham o papel de guardas de rota, onde cada função retorna um valor booleano, o qual o Angular emprega para decidir se uma rota é acessível ou não.

Para observarmos como funciona essa nova abordagem, nós iremos refatorar a classe authGuard em uma guarda de rotas funcional.

Em um arquivo authGuard.ts, criamos uma função authGuard:

Aqui não temos construtor, então usaremos inject() para realizar a injeção do serviço que captura o usuário logado e do Router:

Em seguida inserimos a lógica de acesso à rota, conforme for necessário, retornando true ou false:

Além disso, no arquivo app.module.ts, não é mais necessário inserir o serviço de guarda de rotas nos providers. Na constante que definimos com nossas rotas no arquivo app-routing.module.ts, adicionamos o canActivate: [authGuard] na rota que desejamos proteger, logo após a definição do path e do component:

Essa mudança soa estranha para quem já tem o costume de trabalhar com Angular, já que aqui não há a injeção de dependências no construtor e essa guarda tem uma “carinha” de função que não estamos acostumados a encontrar no Angular.

Ou seja, a grande mudança é que, anteriormente, nós precisávamos de uma classe específica para implementar as guardas de rotas. Agora, uma simples função faz esse trabalho.

E no que essa mudança implica?

A abordagem obsoleta, de criação de classes, oferece uma maior flexibilidade, uma vez que possibilita a utilização de Injeção de Dependência e oferece suporte a recursos mais avançados, incluindo o lazy loading. No entanto, como percebemos pela documentação, essa mudança foi realizada com intuito de promover o uso de funções JavaScript simples no Angular.

A abordagem funcional geralmente leva a um código mais simples e fácil de entender, pois é mais direta. Portanto, percebemos que aos poucos estamos vivenciando mudanças como essa abordagem funcional, que tornam a escrita mais amigável e consequentemente, atraem mais pessoas para o “lado Angular da força”.

Conclusão

E se você gostou de conhecer essa nova abordagem de guardas de rotas no Angular, que tal dar uma olhada na nova formação Desenvolva Aplicações Escaláveis com Angular para aprofundar seus conhecimentos e colocar em prática o uso das guardas de rotas funcionais e de outras ferramentas do Angular?

Além disso, não deixe de compartilhar suas experiências de aprendizado desse assunto marcando os perfis da Alura usando a #AprendiNaAlura nas suas redes sociais. Vamos mergulhar nesse conhecimento!