El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre los guardias de ruta en Angular, una característica esencial para controlar el acceso a las rutas en una aplicación Angular. Los guardias de ruta permiten proteger rutas específicas, asegurando que solo los usuarios autorizados puedan acceder a ellas. También pueden ser utilizados para gestionar la navegación y realizar tareas antes de que una ruta sea activada o desactivada.

¿Qué son los Guardias de Ruta?

Los guardias de ruta son servicios que implementan interfaces específicas de Angular para controlar la navegación. Estas interfaces permiten interceptar la navegación y decidir si una ruta puede ser activada, desactivada, cargada o descargada.

Tipos de Guardias de Ruta

CanActivate: Determina si una ruta puede ser activada.
CanActivateChild: Determina si las rutas hijas pueden ser activadas.
CanDeactivate: Determina si una ruta puede ser desactivada.
CanLoad: Determina si un módulo puede ser cargado de manera diferida (lazy loading).
Resolve: Recupera datos antes de que una ruta sea activada.

Implementación de Guardias de Ruta

Paso 1: Crear un Guard

Primero, crearemos un guard utilizando Angular CLI:

ng generate guard auth

Esto generará un archivo auth.guard.ts con una estructura básica.

Paso 2: Implementar la Lógica del Guard

Editaremos el archivo auth.guard.ts para implementar la lógica de nuestro guard. En este ejemplo, utilizaremos CanActivate para proteger una ruta:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

En este ejemplo, AuthGuard utiliza un servicio de autenticación (AuthService) para verificar si el usuario está autenticado. Si el usuario no está autenticado, se redirige a la página de inicio de sesión.

Paso 3: Aplicar el Guard a una Ruta

Ahora, aplicaremos el guard a una ruta en el archivo de configuración de rutas (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 './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
];

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

En este ejemplo, la ruta protected está protegida por AuthGuard. Solo los usuarios autenticados podrán acceder a esta ruta.

Ejercicio Práctico

Ejercicio 1: Crear un Guard de Autenticación

Objetivo: Crear un guard que proteja una ruta específica y redirija a los usuarios no autenticados a la página de inicio de sesión.
Pasos:
- Crear un servicio de autenticación (AuthService) que tenga un método isLoggedIn().
- Generar un guard (AuthGuard) utilizando Angular CLI.
- Implementar la lógica de autenticación en el guard.
- Aplicar el guard a una ruta en el archivo de configuración de rutas.

Solución

Crear el Servicio de Autenticación:

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private loggedIn = false;

  isLoggedIn(): boolean {
    return this.loggedIn;
  }

  login() {
    this.loggedIn = true;
  }

  logout() {
    this.loggedIn = false;
  }
}

Generar el Guard:

ng generate guard auth

Implementar la Lógica del Guard:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Aplicar el Guard a una Ruta:

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
];

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

Conclusión

En esta lección, hemos aprendido sobre los guardias de ruta en Angular y cómo utilizarlos para proteger rutas específicas en nuestra aplicación. Hemos cubierto los diferentes tipos de guardias de ruta y hemos implementado un guard de autenticación paso a paso. Los guardias de ruta son una herramienta poderosa para controlar el acceso y la navegación en aplicaciones Angular, asegurando que solo los usuarios autorizados puedan acceder a ciertas áreas de la aplicación.

En el próximo módulo, exploraremos los formularios en Angular, comenzando con los formularios basados en plantillas.

Guardias de Ruta

¿Qué son los Guardias de Ruta?

Tipos de Guardias de Ruta

Implementación de Guardias de Ruta

Paso 1: Crear un Guard

Paso 2: Implementar la Lógica del Guard

Paso 3: Aplicar el Guard a una Ruta

Ejercicio Práctico

Ejercicio 1: Crear un Guard de Autenticación

Solución

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas