O que é Route Guards Angular

Conteúdo

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:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent  } from './app.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
 
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: '',     component: HomeComponent },
  { path: 'user', component: UserComponent }
];
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

<ul>
  <li><a routerLink="/">Home</a></li>
  <li><a routerLink="/user">User</a></li>
</ul>
<hr>
 
<router-outlet></router-outlet>

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:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class UserGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

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.

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class UserGuard implements CanActivate {
  constructor(private router: Router) { }
 
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

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

// Resto dos imports acima...
import { UserGuard } from './user.guard';
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: '',     component: HomeComponent },
  { path: 'user', component: UserComponent }
];
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [UserGuard],
  bootstrap: [AppComponent]
})
// Mais coisas abaixo...

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

{ path: '/caminho_do_componente',
  component: nome_do_componente,
  canActivate: [nome_do_guard]
}

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

// Resto dos imports e configurações acima...
const appRoutes: Routes = [
  { path: '',     component: HomeComponent },
  { path: 'user', component: UserComponent, canActivate: [UserGuard] }
];
// Outras configurações abaixo...

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.

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class UserGuard implements CanActivate {
  constructor(private router: Router) { }
 
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
 
    alert('Sem autorização para acessar a rota.');
    this.router.navigate(['']);
    return false;
  }
}

CanActivateChild rota de guarda

A 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.

const appRoutes: Routes = { path: 'user', component: UserComponent, canActivate : [UserGuard], canActivateChild : [DashboardGuard],
      children: [
      {  path: 'dashboard', component: DashboardComponent},
      {  path: 'profile', component: ProfileComponent  },
      ]  
};

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:

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class UserExitGuard implements CanDeactivate<unknown> {
  canDeactivate(
    component: unknown,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
 
      return false;
  }
}

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.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  canExit(): boolean {
    if(confirm("Você quer sair da rota?")) {
      return true;
    } else {
      return false;
    }
  }
}

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.

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
 
import { UserComponent } from './user/user.component';
 
@Injectable({
  providedIn: 'root'
})
export class UserExitGuard implements CanDeactivate<unknown> {
  canDeactivate(
    component: UserComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return component.canExit();
  } 
}

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.

// Imports e outras coisas acima...
import { UserExitGuard } from './user-exit.guard';
 
const appRoutes: Routes = [
  { path: '',     component: HomeComponent },
  { path: 'user', component: UserComponent, canDeactivate: [UserExitGuard] }
];
// Mais configurações abaixo...

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

O 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.

@Injectable()
export class CanLoad implements CanLoad {
  canLoad(route: Route): boolean {
    return 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

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

Vida Full Stack

Publisher Name

Vida Full Stack

Publisher Logo

O que é Route Guards Angular

O que é Route Guards Angular

Route Guards Angular Mão na massa

CanActivate rota de guarda

CanActivateChild rota de guarda

CanDeactive rota de guarda

CanLoad rota de guarda

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

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

O que é Route Guards Angular

O que é Route Guards Angular

Route Guards Angular Mão na massa

CanActivate rota de guarda

CanActivateChild rota de guarda

CanDeactive rota de guarda

CanLoad rota de guarda

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

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

Tenha uma carreira
Front-end de Sucesso!