Cómo proteger tus rutas en Angular con los Guards

Los Guard son una característica de Angular que nos permite controlar el acceso a las rutas de nuestra aplicación. Esto es muy útil cuando queremos proteger ciertas vistas o funcionalidades de nuestra aplicación y sólo queremos que sean accesibles para usuarios autenticados o con ciertos permisos.

Para utilizar Guard en Angular, primero debemos crear una clase que implemente la interfaz CanActivate de Angular. Esta interfaz nos obliga a implementar un método canActivate() que debe devolver un booleano indicando si el usuario tiene acceso a la ruta o no. Por ejemplo, podríamos tener un Guard que sólo permita el acceso a usuarios autenticados de la siguiente manera:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Una vez que tenemos nuestro Guard creado, podemos utilizarlo para proteger una ruta de nuestra aplicación. Para ello, debemos añadir el Guard como un elemento de la propiedad data de la ruta en nuestro archivo de rutas. Por ejemplo, si queremos proteger la ruta ‘/private’ para que sólo puedan acceder usuarios autenticados, podríamos hacerlo de la siguiente manera:

import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'private',
    component: PrivateComponent,
    canActivate: [AuthGuard]
  }
];

En este ejemplo, estamos utilizando el Guard AuthGuard para proteger la ruta ‘/private’.
Si un usuario no está autenticado y trata de acceder a esta ruta, el método canActivate() del Guard devolverá false y el usuario será redirigido a la ruta ‘/login’.

Quieres saber más puedes ver este video.