No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

CanDeactivate

23/25
Recursos

As铆 como los Guards pueden permitir o denegar el acceso a una ruta, tambi茅n pueden permitir (o no) el caso contrario, que un usuario salga de una p谩gina.

C贸mo proteger la salida de una ruta

驴Tienes en una p谩gina un formulario muy largo, o un proceso que demora algunos minutos, y el usuario cierra el navegador o se redirecciona a otra ruta?

Puedes alertarle de que el progreso del formulario se perder谩 o que un proceso a煤n no ha finalizado utilizando los Guards del tipo CanDeactivate.

1. Creando el guard

Crea un Guard utilizando el comando ng g g <nombre-guard> y esta vez selecciona que implemente la interfaz CanDeactivate.

<p style=鈥渢ext-align: center鈥>
<img src=鈥https://static.platzi.com/media/articlases/Images/Screenshot from 2022-06-04 12-39-36.png鈥 title=鈥淐onsola selecci贸n tipo de Guard鈥 />
</p>

El aspecto del nuevo Guard ser谩 como el siguiente.

// modules/shared/guards/exit.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ExitGuard implements CanDeactivate<unknown> {

  canDeactivate(component: unknown, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

}

La funci贸n canDeactivate() devuelve un booleano (o una promesa u observable con un booleano) para permitir o no la salida del usuario de la p谩gina dependiendo la l贸gica que tu quieras.

2. Importando el guard

Importa el Guard en la ruta que necesites, esta vez en la propiedad canDeactivate de cada regla.

// modules/cms/cms-routing.module.ts
import { ExitGuard } from '../shared/guards/exit.guard';

const routes: Routes = [
  {
    path: ',
    component: LayoutComponent,
    children: [
      {
        path: ',
        redirectTo: 'admin',
        pathMatch: 'full'
      },
      {
        path: 'admin',
        component: AdminComponent,
        canDeactivate: [ ExitGuard ],
      },
    ]
  }
];

L贸gica din谩mica del Guard

En los Guards del tipo CanDeactivate puedes implementar la l贸gica que necesites para permitir o no la salida del usuario de una p谩gina. En este caso, la l贸gica est谩 atada al Guard y no tiene relaci贸n con el estado del componente, dificultando la programaci贸n de esa l贸gica.

Puedes relacionar el Guard con el Componente, para que sea el mismo qui茅n determine la l贸gica y valide si permitir o no la salida del usuario.

1. Interfaz personalizada

Crea una interfaz para tipar tu componente y obligarlo a implementar una funci贸n que contendr谩 la l贸gica necesaria.

// modules/shared/guards/exit.guard.ts
export interface OnExit {
  onExit: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class ExitGuard implements CanDeactivate<unknown> {

  canDeactivate(component: OnExit, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return component.onExit ? component.onExit() : true;
  }
}

La interfaz OnExit tiene una funci贸n llamada onExit() que los componentes tendr谩n que implementar para permitir la salida. En el return del Guard, has el llamado a dicha funci贸n para validar o no la l贸gica del componente.

2. Implementando la interfaz

Implementa la interfaz en el componente cuya l贸gica depender谩 de que el usuario pueda o no salir de la p谩gina.

// modules/cms/components/admin/admin.component.ts
import { Component } from '@angular/core';
import { OnExit } from '../../../shared/guards/exit.guard';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnExit {

  onExit() {
    const exit = confirm('驴Seguro desea salir?');
    return exit;
  }
}

De esta manera, solo necesitar谩 un Guard del tipo CanDeactivate, cada componente que lo necesite, implementar谩 la interfaz y aplicar谩 la l贸gica necesaria para su funcionamiento.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 1

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para los que est谩n utilizando Swal

OnExit(){
    const confirm = Swal.fire({
      title: 'Are you sure?',
      showDenyButton: true,
      confirmButtonText: 'Yes',
    }).then((result) => {
      if (result.isConfirmed) {
        return true;
      }
      return false
    });
    return confirm
  }