Interceptor

Clase 15 de 20 • Curso de Autenticación con Angular

Israel Garcia

student•

Para quien este trabajando con la versión 17 de Angular, acá dejo como es que aplique este tema en dicha versión:

token.interceptor.ts

import { HttpContext, HttpContextToken, HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { TokenService } from '../services/token.service';

const CHECK_TOKEN = new HttpContextToken<boolean>(() => false);

export function checkToken() {
  return new HttpContext().set(CHECK_TOKEN, true);
}

export const tokenInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.context.get(CHECK_TOKEN)) {
    const tokenService = inject(TokenService);
    const accessToken = tokenService.getToken();
    if (accessToken) {
      const authRequest = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${accessToken}`)
      });
      return next(authRequest);
    }
    return next(req);
  }
  return next(req);
};

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { tokenInterceptor } from './interceptors/token.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([tokenInterceptor])),]
};

Función getUsers() del archivo users.service.ts

getUsers(){
    return this.http.get<User[]>(`${this.apiUrl}/api/v1/users`, { context: checkToken() });
  }

Creck Brayan Mauri Pastor Paredes

student•

gracias

Milton Estrada

student•

ng g interceptor interceptors/token --skip-tests

Dimas Arley Lopez Espinosa

student•

El contexto es vital en la autenticación, ya que define la información adicional que acompaña a la solicitud del usuario, permitiendo al servidor comprender qué acciones se pueden realizar. Sin el contexto, no se puede asegurar que la solicitud tenga el token correcto, lo que es esencial para confirmar la identidad del usuario y garantizar que tiene acceso a los recursos solicitados. Esto es especialmente relevante en Single Page Applications (SPA), donde se requiere un manejo eficiente y seguro de las sesiones.

Darwin Rodríguez

student•

Mucho más reducido el interceptor. Tengo una duda dónde podría poner el catchError de manera tal que no sea repetitivo?

Santos Avid Silva Huaman

student•

Interceptors, al mommento de registrarlos en el app, ha cambiado su sintaxs? En algulars 15, no funciona. Es decir, no funciona el interceptor

Santos Avid Silva Huaman

student•

la solucion es que en Angular 15,: {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi:true},
En el video, la agrega en el app.module. Sin embargo en Angular 15, esa linea se agrega en el main.ts Saludos

Interceptor

Introducción: requisitos y proyecto del curso

Cómo aprender Autenticación con Angular

Login

Flujo de login

Conectar login a API

Flujo de registro

Validar Usuario

Optimizando el flujo de registro

Flujo de recuperación de contraseñas

Implementación del password recovery

Cambio de módulo

Proteger el Acceso

¿Dónde guardar el Token?

Redirects para recuperar sesión

Obtener users

Obtener el perfil

Reactividad en profile

Interceptor

¿Cómo cerrar sesión cuando expire el token?

Implementando el cierre de sesión

¿Qué es el refresh token?

Interceptor con el refresh token

Próximos pasos

Toma el curso práctico