Guards en Angular: Protegiendo nuestras rutas

En Angular, los guards (guardianes) son una herramienta clave para controlar el acceso a rutas dentro de una aplicación. Nos permiten definir reglas que determinan si un usuario puede o no navegar a una ruta específica.

¿Qué son los Guards en Angular?

Los Guards en Angular son clases que implementan interfaces específicas y se utilizan para gestionar la navegación dentro de la aplicación. Nos ayudan a prevenir accesos no autorizados, confirmar la salida de una página y realizar validaciones antes de cargar una ruta.

Tipos de Guards en Angular

Angular proporciona cinco tipos de guards:

1. CanActivate: Controla si se puede acceder a una ruta.
2. CanActivateChild: Controla si se pueden activar las rutas hijas de una ruta protegida.
3. CanDeactivate: Controla si un usuario puede salir de una ruta.
4. Resolve: Obtiene datos antes de que se cargue una ruta.
5. CanLoad: Evita que un módulo de carga diferida (lazy load) se cargue si la condición no se cumple.

Creación de un Guard en Angular

Para crear un guard en Angular, podemos usar el Angular CLI con el siguiente comando:

ng generate guard auth

O de manera abreviada:

ng g g auth

Esto generará un archivo auth.guard.ts con la estructura base de un guard.

Implementando un Guard (CanActivate)

Un ejemplo básico de un guard que protege rutas solo para usuarios autenticados sería el siguiente:

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

@Injectable({ providedIn: 'root' })
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;
    }
  }
}

Aquí:

• Verificamos si el usuario está autenticado con authService.isAuthenticated().
• Si el usuario está autenticado, permitimos el acceso (return true).
• Si el usuario no está autenticado, lo redirigimos al login y denegamos el acceso (return false).

Configurando un Guard en las Rutas

Para aplicar un guard en una ruta, lo agregamos en el app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: 'login' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Aquí, la ruta /home solo será accesible si el AuthGuard devuelve true. De lo contrario, redirigirá a /login.

Conclusión

Los Guards en Angular son esenciales para proteger rutas y controlar el acceso a ciertas secciones de la aplicación. Con CanActivate, CanLoad y otros tipos de guards, podemos definir reglas de navegación según las necesidades de nuestro proyecto.

Si tienes dudas o necesitas más ejemplos, ¡pregunta sin miedo! 😉