Proteções de rota no Angular

Esta lição explica como proteger rotas em aplicações Angular usando proteções de rota.

O que são proteções de rota?

As proteções de rota controlam o acesso às rotas no Angular. Elas são úteis para proteger rotas confidenciais ou restritas.

Tipos de proteções

• CanActivate: Determina se uma rota pode ser ativada.
• CanActivateChild: Protege as rotas filhas.
• CanDeactivate - Verifica antes de sair de uma rota.
• Resolução - Busca dados antecipadamente antes de ativar a rota.

Criando uma proteção

Crie uma proteção usando o Angular CLI:

ng generate guard auth

Implementando canActivate()

O método canActivate() controla o acesso à rota:

canActivate(): boolean {
  return true; // or false to block navigation
}

Usando proteções nas rotas

Adicione proteções às rotas no seu módulo de roteamento:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Proteção CanDeactivate

CanDeactivate impede sair de uma rota se determinadas condições não forem atendidas, sendo útil para formulários:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Proteção de resolução

A proteção Resolve busca dados antes de uma rota ser carregada:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Resumo

Você aprendeu a proteger e aprimorar a navegação nas suas aplicações Angular com proteções de rota. Continue avançando!