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