Molte applicazioni necessitano di un meccanismo di autenticazione e autorizzazione. Questo significa che prima di permettere all'utente di accedere a un component, è necessario verificare che l'utente ne abbia il permesso.
In questi casi torna utile utilizzare un guard che altro non è che una classe che implementa l'interfaccia CanActivate. Come si intuisce dal nome, un guard che implementa l'interfaccia CanActivate viene eseguito quando si cerca di navigare verso un component. In questa fase possiamo verificare i privilegi dell'utente e mandare avanti o bloccare la navigazione.

L'interfaccia CanActivate espone il metodo canActivate che è quello che viene realmente invocato. Questo metodo accetta in input la route da attivare e uno snapshot dello stato del router. Il primo parametro è quello più utile in quanto possiamo risalire alla route da attivare e fare tutti i controlli. Il metodo deve tornare un boolean, oppure una Promise o un Observable. Se il valore finale è false, la navigazione si blocca, altrimenti procede normalmente. In questo esempio possiamo vedere come creare un guard e come configurarlo nella route.

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class ActivationGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return true;
  }
}

const routes: Routes = [
  { path: 'second', component: SecondComponent, canActivate: [ActivationGuard] },
];

Oltre a eseguire codice prima di navigare verso un component, il sistema di routing permette anche di eseguire codice prima di navigare via da un component. Questa funzionalità torna utile nelle form di dettaglio. In queste form, se l'utente modifica dei dati e poi naviga a un altro component senza salvare è buona cosa chiedere una conferma all'utente per evitare una involontaria perdita di dati.