Creando un contexto a interceptor

¡Con esto creo que puedo modificar mis propios proyectos y adaptarlos a mis necesidades, buenísimo!

El tema del contexto y los interceptores is crazy!

Como así, me confunde el profesor en el minuto 2:59. En la clase anterior se supone que el interceptor va a estar a la escucha de cualquier petición sino se le agrega un contexto pero en ese minuto de esta clase dice todo lo contrario, que al no enviar ningún contexto no todas van a estar siendo evaluadas por el interceptor. No se supone que al poner contexto en una petición es para que el interceptor este al pendiente de solo esa petición y no de todas las demás peticiones?..O entendí mal?. No se si alguien me pueda explicar esta parte

Tenia conocimiento de los interceptors, pero estas ultimas 2 clases me volaron la cabeza.

Sin duda la mejor forma de aprender es aprendiendo a desaprender.

Vale siguiendo, la misma fórmula de interceptores para aquellas rutas que deban agregar un token de autenticación, por ejemplo, el endpoint donde solicitamos el profile del usuario logueado, he realizado lo siguiente, para no estar metiendo el token en todas las peticiones:

in ‘add-token.interceptor.ts’

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpContext,
  HttpContextToken
} from '@angular/common/http';
import { Observable } from 'rxjs';

import { TokenService } from '../services/token.service';

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

export function addTokenHeader() {
  return new HttpContext().set(AUTH_TOKEN, true);
}

@Injectable()
export class AddTokenInterceptor implements HttpInterceptor {

  constructor(
    private tokenService: TokenService
  ) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    request = this.addToken(request);
    return next.handle(request);
  }

  // this.http.get|post|put|delete(<CUALQUIER URL>, {context: addTokenHeader()})
  private addToken(request: HttpRequest<unknown>) {
    if(request.context.get(AUTH_TOKEN)) {
      const token = this.tokenService.getToken();
      if(token) {
        const authRequest = request.clone({
          headers: request.headers.set('Authorization', `Bearer ${token}`)
        });
        return authRequest;
      }
    }
    return request;
  }
}

in auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { switchMap, tap } from 'rxjs/operators';

import { Auth } from '../models/auth.model';
import { User } from '../models/user.model';
import { TokenService } from './token.service';
import { addTokenHeader } from '../interceptors/add-token.interceptor';

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

  private apiUrl = 'https://young-sands-07814.herokuapp.com';

  constructor(
    private http: HttpClient,
    private tokenService: TokenService
  ) { }
  login(email: string, password: string) {
    return this.http.post<Auth>(`${this.apiUrl}/api/auth/login`, {email, password})
    .pipe(
      tap(response => this.tokenService.saveToken(response.access_token))
    );
  }
  getProfile() { // el interceptor se encarga de añadir el token
    return this.http.get<User>(`${this.apiUrl}/api/auth/profile`, {context: addTokenHeader()});
  }
  loginAndGetProfile(email: string, password: string) {
    return this.login(email, password)
    .pipe(
      switchMap(() => this.getProfile())
    )
  }
}

Ahora la petición ‘…api/auth/profile’ tiene el contexto ‘{context: addTokenHeader()}’, que resuelve poner el ‘AUTH_TOKEN’ a true para que en el if del interceptor ‘if(request.context.get(AUTH_TOKEN)) {’ solucione adherir el
’headers: request.headers.set(‘Authorization’, Bearer ${token})’ y con ello pasar la lógica del servidor para endpoints con autorización y sólo para aquellos endpoints donde se necesite.

Excelente clase!