Angular guard: canDeactivate

Então desenvolvedor, você já esteve em meio a uma aplicação onde deveria bloquear o roteamento do usuário? exemplo que ocorreu comigo: enquanto o usuário não respondesse certo pergunta, não poderia “sair” nem navegar.

Em resumo, o usuário deveria ser “limitado”.

E qual a solução? canDeactivate! (que talvez seja a sua tambem!)

O que é?

O canDeactivate é um guard poderoso do Angular que nos permite controlar quando um usuário pode ou não sair de uma rota específica. Esta funcionalidade é especialmente útil quando precisamos prevenir a perda acidental de dados não salvos.

O Problema

Em muitas aplicações, nos deparamos com situações onde o usuário pode acidentalmente navegar para fora de um formulário ou página com alterações não salvas. Isso pode resultar em perda de dados e uma experiência frustrante para o usuário.

A Solução com canDeactivate

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable({
  providedIn: 'root'
})
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    return component.canDeactivate();
  }
}

Implementação no Componente

@Component({
  selector: 'app-form',
  template: '...'
})
export class FormComponent implements ComponentCanDeactivate {
  isDirty = false;

  canDeactivate(): boolean {
    if (this.isDirty) {
      return window.confirm('Você tem alterações não salvas. Deseja realmente sair?');
    }
    return true;
  }
}

Configuração na Rota

const routes: Routes = [
  {
    path: 'form',
    component: FormComponent,
    canDeactivate: [PendingChangesGuard]
  }
];

Com esta implementação, sempre que o usuário tentar navegar para fora do componente com alterações não salvas, será exibido um diálogo de confirmação.

Por fim, com o canDeactivate é possivel trazer segurança, melhor experiencia de usuário e um ar mais sofisticado ao código.

:D

Att.

Maria Júlia Testoni