Cursos Empresas Blog Live Conf Eventos Precios

0:0012:50

Recursos

Resumen

Una aplicación tendrá N cantidad de rutas, pero es posible que muchas de estas tengan restricciones de acceso solo para administradores o determinados roles de usuario.

En estos casos, los Guards llegan para ayudarnos a darle seguridad a nuestras rutas.

Cómo segurizar Rutas

Con ayuda del CLI de Angular, puedes crear tu primer guardián con el comando ng generate guard <nombre-guard> o en su forma corta ng g g <nombre-guard>.

1. Creando el primer guard

Al utilizar este comando, nos hará una pregunta sobre qué interfaz quieres que implemente por defecto:

Cada opción tiene una funcionalidad distinta para cada tipo de Guard. Escoge la primera opción llamada CanActivate.

Al auto generar el código, verás tu primer Guard con el siguiente aspecto.

// modules/shared/guards/admin.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

}

Un Guard puede devolver un booleano, una promesa con un booleano o un observable, también con un booleano. Dependiendo la lógica que tengas que aplicar para el caso sea síncrona o asíncrona.

2. Importando el guard

Ahora importa el nuevo Guard el routing de tu aplicación.

// app-routing.module.ts
import { AdminGuard } from './modules/shared/guards/admin.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule),
    data: { preload: true },
  },
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule),
    canActivate: [ AdminGuard ],
    data: { preload: true },
  }
];

Agrégale a las rutas que quieras segurizar canActivate: [ AdminGuard ]. De esta manera, ya puedes implementar la lógica que necesites para cada Guard. En este caso, permitir el acceso al módulo CMS solo para usuarios administradores.

Contribución creada por: Kevin Fiorentino.

Protección de rutas en Angular con guardianes

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 19 / 25

Ver clases

Protección de rutas en Angular con guardianes

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 19 de 25

Clase 19 / 25

Protección de rutas en Angular con guardianes

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 19 / 25

Ver clases

Comentarios (18)18 comentarios

Juan Luna

Hace 4 años

Bueno ya sabemos que los profesores están despegados de los comentarios de sus alumnos, porque no contestan nada, ni a preguntas ni a nada, que lástima, con lo buena que es esta plataforma ....

user.model.ts

export interface User {
  id: string;
  name: string;
  email: string;
  password: string;
  role: 'customer' | 'admin';
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface CreateUserDTO extends Omit<User, 'id' | 'role'> {}

profile.component.html

<div *ngIf="user">
    <h2>My Profile</h2>
    <p>Nombre: {{user.name}}</p>
    <p>Email: {{user.email}}</p>
    <p>Role: {{user.role || 'customer'}}</p>
</div>

esa es una solución fácil y ya veremos cuando apliquen lo del admin

Jorddi Suarez

Hace 5 años

Actualmente la API no permite agregar una propiedad "role" para la creación de nuevos users

Informatica ITE

Si no le quito la propiedad role marca error

Jimmy Buriticá Londoño

Guards

Los Guards en Angular, son de alguna manera: middlewares que se ejecutan antes de cargar una ruta y determinan si se puede cargar dicha ruta o no.

Carlos Eduardo Mayorga Rodríguez

Para no tener problemas con el rol del usuario, si se está continuando el desarrollo desde el curso anterior, se tiene que tener en cuenta que la API ahora es otra. https://damp-spire-59848.herokuapp.com La del curso anterior es https://young-sands-07814.herokuaoo.com/api/iusers

Alberto Cruz

Excelente, Gracias por el aporte!.

Oscar Ivan Lozoya Rodríguez

Para generar guardianes es:

ng g g

la segunda g es por Guards, para generar lo que nos enseña en esta clase es

ng g g guards/auth

Franklin Gil

Lo que nunca vi en el curso es que tambien se puede colocar completo, por ejemplo ng generate guard | component | pipe | service | ...

Todo iba bien, hasta que cambian el api, por que la que se venia desarrollando no soporta los roles

Andrés Felipe Schambach Tarazona

Para los que tengan problemas con la creación de los guardianes por

utilicen el comando

ng generate guard guards/auth

alberto ayala rodriguez

el tema de los guardianes está cool 🖖

LEONARDO FERNANDEZ

que pasaría si el token esta vencido? igual seguira existiendo en el local storage por ende me deja entrar al perfil asi el token este vencido que se deberia hacer en ese caso?

Yo he venido realizando el ejercicio desde el primer curso, no he cargado los repositorios, y veo que los fuentes entre un curso y otro cambian. En este punto no puedo crear el usuario con role, dado que la API no reconoce el rol. Que se debe hacer en este caso?

Alexis Duque

Esto me funciono!

Christian Ricardo Conchari Cabrera

Hace 3 años

Les comparto el código del archivo auth.guard.ts con el que he podido continuar con el curso a la fecha:

import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { TokenService } from '../services/token.service';


export const authGuard: CanActivateFn = (route, state) => {
  const tokenService: TokenService = inject(TokenService);
  if (tokenService.getToken()) {
    return true;
  }
  return false;
};

El resto de archivos los tengo igual que los trabajados en la clase.

Jorge Luis Oseguera López

Si están trabajando con el código anterior y no lo han descargado del repositorio del profesor, como yo eh hecho. Probablemente tengan problemas con el Login. El problema es que como cambiaron de API, el usuario que por default pusieron en el código anterior no existe. Para esto solo tienen que crear un nuevo usuario con el siguiente endpoint:

POST: https://damp-spire-59848.herokuapp.com/api/users

{
    "name": "Usuario",
    "email": "correo@correo.com",
    "password": "123456"
}

Después poner el la parte del componente "nav.component.ts", en el método login:

login(): void {

    this.authService.loginAndGet('correo@correo.com', '123456')
    .subscribe(user => {
      console.log(user);
      this.profile = user;
    });

  }

LUIS ANTONIO CALVO QUISPE

o tambien puedes incluir en otro button, el metodo para crear los usuarios ..

  onCreateUser() {
    this.usersService.postSave(
      {
        email: 'luis@gmail.com',
        password: '1073',
        name: 'Luis'
      }
    )
    .subscribe(data =>{
      console.log(data);
    })
  }

Santiago Velandia Gallo

Hice esto porque en el nav-bar seguía apareciendo el boton al cambiar de pagina

  ngOnInit(): void {
    this.storeService.myCart$.subscribe(products => {
      this.counter = products.length;
    });
    this.getAllCategories();
    const token = this.tokenService.getToken();
       if(token){
        this.authService.getProfile().subscribe(data=>{
          this.profile =data;
        });
       }
  }

Andres David Caicedo Marquez

Hace un año

En postman

ELKIN YESID MORENO VELEZ

¿ Que pasa cuando el usuario es consumidor y administrador ?

Se crean dos usuarios Se tiene un usuario y dos roles. (Roles por usuario).

Rahiber Paradas

Lo más recomendable es tener un usuario y con N cantidad de roles, el usuario al hacer login debería poder seleccionar con cual rol ingresar o tener dos login diferente, uno para los usuarios y otro para los admin.

Kengya Moncada

Hace 2 años

import { HttpClient } from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import {
  loginResponse,
  user,
  userLogin,
} from 'src/app/models/user.model';
import { catchError, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { StorageService } from './storage.service';
import { ToastService } from './toast.service';
import { isPlatformBrowser } from '@angular/common';
import { environment } from 'src/app/core/constants/environment';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(
    this.isAuthenticated()
  );
  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
  constructor(
    private http: HttpClient,
    private router: Router,
    private localStorage: StorageService,
    private ToastServices: ToastService,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}

  createUser(userData: user) {
    const url = `${environment.api.baseUrl}${environment.api.users.create}`;
    this.ToastServices.show(
      'Has sido registrado exitosamente',
      'success',
      3000
    );
    return this.http.post<user>(url, userData);
  }

  loginUser(userData: userLogin): Observable<loginResponse> {
    const url = `${environment.api.baseUrl}${environment.api.auth.login}`;
    return this.http.post<loginResponse>(url, userData).pipe(
      tap((resp) => {
        console.log('Respuesta del login:', resp);
        this.localStorage.setItem('access_token', resp.access_token);
        this.localStorage.setItem('refresh_token', resp.refresh_token);
        this.isAuthenticatedSubject.next(true);
        this.ToastServices.show('Has iniciado sesión', 'success', 3000);
      }),
      catchError((error) => {
        this.ToastServices.show('Usario no registrado', 'error', 3000);
        return throwError(() => error);
      })
    );
  }

  private isTokenValid(token: string): boolean {
    const helper = new JwtHelperService();
    return !helper.isTokenExpired(token);
  }

  public isAuthenticated(): boolean {
    if (isPlatformBrowser(this.platformId)) {
      const token = this.localStorage.getItem('access_token');
      return token ? this.isTokenValid(token) : false;
    }
    return false;
  }

  logout(): void {
    this.localStorage.removeItem('access_token');
    this.localStorage.removeItem('refresh_token');
    this.isAuthenticatedSubject.next(false);
    this.router.navigate(['/auth/login']);
  }

  updateAuthStatus(): void {
    const isAuthenticated: boolean = this.isAuthenticated();
    this.isAuthenticatedSubject.next(isAuthenticated);
  }
}

import { Injectable } from '@angular/core';
import { Router} from '@angular/router';
import { StorageService } from '../modules/auth/storage.service';

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

  constructor(private localStorage: StorageService, private router: Router) {}

  canActivate(): boolean {
    setTimeout(() => {
      const token = this.localStorage.getItem('access_token');
      if (!token) {
        this.router.navigate(['/auth/login']);
      }
    }, 0);

    return true;
  }
}

Diego Frank Lipa Choque

Model User

export interface User {
  id: string;
  email: string;
  password: string;
  name: string;
  role: string;
}

Recursos

Resumen

Protección de rutas en Angular con guardianes

Protección de rutas en Angular con guardianes

Protección de rutas en Angular con guardianes

Progreso del curso

Manejo de rutas

Módulos

Precarga de módulos

Guardianes

Deployment

Despedida

Protección de rutas en Angular con guardianes

Protección de rutas en Angular con guardianes

Recursos

Resumen

Cómo segurizar Rutas

1. Creando el primer guard

2. Importando el guard

Comentarios

Guards

Recursos

Resumen

Cómo segurizar Rutas

1. Creando el primer guard

2. Importando el guard

Comentarios

Guards