Auth Guards en Angular 9/10/11

AuthGuard se utiliza para proteger las rutas del acceso no autorizado en angular.

¿Cómo funciona AuthGuard?

La protección de autenticación proporciona un evento de ciclo de vida llamado canActivate. El canActivate es como un constructor. Se llamará antes de acceder a las rutas. El canActivate tiene que devolver verdadero para acceder a la página. Si devuelve falso, no podremos acceder a la página. Podemos escribir nuestra lógica de autenticación y autorización de usuario dentro de la función canActivate.

AuthGuard se utiliza para proteger las rutas del acceso no autorizado

Así que aquí estamos creando un AuthGuard en angular que protegerá nuestras rutas del acceso no autorizado.

Ejemplo: podemos crear un AuthGuard ejecutando un comando simple usando CLI.

ng g guardia servicios/autorización

El comando anterior crea AuthGuard dentro de la carpeta de servicios y el nombre de AuthGuard es auth.

import { Injectable } from "@angular/core";
import {
    ActivatedRouteSnapshot,
    CanActivate,
    Router,
    RouterStateSnapshot,
    UrlTree
} from "@angular/router";
import { AuthService } from "./auth.service";
  
@Injectable()
export class AuthGuard implements CanActivate {
    constructor(
        private authService: AuthService,
        private router: Router) { }
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean | Promise<boolean> {
        var isAuthenticated = this.authService.getAuthStatus();
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
        }
        return isAuthenticated;
    }
}

Dentro de la función canActivate, estamos comprobando si el usuario está autenticado o no y el método «getAuthStatus» devuelve un valor booleano. Entonces, en función de este valor, devolvemos el valor del método canActivate. Si el valor de retorno «getAuthStatus» significa que el usuario está autenticado, entonces permitimos que el usuario acceda a la página; de lo contrario, llevamos al usuario a la página de inicio de sesión.

Luego, debemos actualizar nuestro archivo de enrutamiento para que AuthGuard proteja qué ruta y qué ruta sea accesible para cada usuario.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } 
from '@angular/router';
import { AuthGuard } 
from './services/auth.guards';
import { LoginComponent } 
from './auth/login/login.component';
import { SignupComponent } 
from './auth/signup/signup.component';
import { PostCreateComponent } 
from './posts/post-create/post-create.component';
import { PostListComponent } 
from './posts/post-list/post-list.component';
  
const routes: Routes = [
  { path: '', 
  component: PostListComponent },
  { path: 'create', 
  component: PostCreateComponent, 
  canActivate: [AuthGuard]},
  { path: 'edit', 
  component: PostCreateComponent, 
  canActivate: [AuthGuard] },
  { path: 'login', 
  component: LoginComponent },
  { path: 'signup', 
  component: SignupComponent }
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
  
export class AppRoutingModule { }

Aquí dentro de la array de rutas, hemos proporcionado canActivate: [AuthGuard] para «crear» y «editar» rutas para que estas dos rutas solo sean accesibles para usuarios autenticados y otras rutas estén abiertas para todos los usuarios.

{ ruta: ‘crear’, componente: PostCreateComponent, canActivate: [AuthGuard]},
{ ruta: ‘editar’, componente: PostCreateComponent, canActivate: [AuthGuard] },

Asegúrese de importar AuthGuard en este archivo de enrutamiento y también agréguelo dentro de los proveedores de @NgModule.

@NgModule({
importaciones: [RouterModule.forRoot(rutas)],
exportaciones: [RouterModule],
proveedores: [AuthGuard]
})

Así es como podemos proteger las rutas del acceso no autorizado en AngularJS.