Los guards en angular son interfaces que permiten proteger las rutas e indican al enrutador si se permitirá la navegación a una ruta o no.
En este caso utilizaremos el guard CanActivate, aunque existen otros cuatro tipos más y son los siguientes: CanActivateChild, CanDeactivate, CanLoad, Resolve.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor (public _authService: AuthenticationService,
public router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (!this._authService.isLoggedIn()) {
this.router.navigate(['login']);
return false;
}
return true;
}
}
El método CanActivate devuelve un valor boolean que es el que indica si se debe permitir o no la navegación a una ruta. Si el usuario no está autenticado, será redireccionado a otro lugar, en este caso a una ruta llamada /login.
Aplicando el guard a la ruta que se quiere proteger:
{path: 'auth-home', component: AuthHomeComponent, canActivate: [AuthGuard]}
Si requieres más información acerca de los guards, puedes consultar la documentación oficial de angular.
