Interceptor
Contenido del curso
Israel Garcia
Creck Brayan Mauri Pastor Paredes
Milton Estrada
Dimas Arley Lopez Espinosa
Darwin Rodríguez
Santos Avid Silva Huaman
Santos Avid Silva Huaman
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() }); }
gracias
ng g interceptor interceptors/token --skip-tests
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.
Mucho más reducido el interceptor. Tengo una duda dónde podría poner el catchError de manera tal que no sea repetitivo?
Interceptors, al mommento de registrarlos en el app, ha cambiado su sintaxs? En algulars 15, no funciona. Es decir, no funciona el interceptor
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
