Explorando Guards no Angular 17

Olá, pessoal!
Na última aula do Ralf ele nos introduziu aos Guards, acabou que só conhecemos o CanActivate então resolvi fazer uma pesquisa sobre os outros métodos e aproveito para deixar um resumo sobre o assunto.

O que são Guards?

Os Guards são mecanismos que o Angular oferece para controlar a navegação em rotas, permitindo-nos tomar decisões com base em diversas condições antes que uma rota seja ativada.
Eles são usados para proteger rotas, verificar condições específicas e, se necessário, redirecionar o usuário para outra página.

Como usar Guards?

Primeiramenta criaremos um guard com o comando:

ng generate guard <nome-guard>

Na criação, selecionaremos o tipo de guard que necessitamos, mais a frente explicarei sobre cada tipo.

No arquivo de guard criado (nome-guard.guard.ts), adicione as funções de guard que deseja, aqui vou exemplificar com o que o Ralf nos apresentou:

export const autenticarGuard: CanActivateFn = (route, state) => {

  // Importar a class Router
  const rota = new Router;

  // validação
  if(localStorage.getItem('email') == undefined) {
    rota.navigateByUrl('/login');
    return false;
  }

  // retorno
  return true;
};

No app.routes.ts, use a propriedade apropriada na configuração de rotas, aqui o CanActivate informa ao roteador para mediar a navegação para esta rota específica.

export const routes: Routes = [
  { path:'login', component: LoginComponent },
  { path: 'admin', component: AdminComponent, canActivate:[autenticarGuard]},
  { path: '', redirectTo:'/login', pathMatch: 'full' },
];

Tipos de Guards:

• CanActivate:
  Verifica se uma rota pode ser ativada. É útil para validar a autenticação do usuário ou outras condições antes de permitir o acesso à rota.
  Se todos os guards retornarem true, a navegação continua. Se algum guarda retornar false, a navegação será cancelada.

• CanActivateChild:
  Semelhante ao CanActivate, mas aplicado a rotas filhas quando você tem rotas aninhadas.

• CanDeactivate:
  Permite que você cancele a navegação para uma rota. É usado para confirmar se o usuário deseja sair de uma página, por exemplo, ao preencher um formulário.

• CanLoad:
  Determina se um módulo pode ou não ser carregado de forma assíncrona. É útil para carregar módulos apenas se certas condições forem atendidas.

Conclusão

Os Guards são essenciais para criar aplicativos Angular mais robustos e seguros, proporcionando controle total sobre a navegação e o acesso às diferentes partes do seu aplicativo.
Como o Ralf disse, esses outros tipos de guard são usados em situações muito específicas, acho que ficará mais claro quando tivermos que implementa-los.