From f2796871566fb24c071716b7919e1062bc586d35 Mon Sep 17 00:00:00 2001 From: J-Laurent Quenin Date: Fri, 19 Apr 2024 11:14:57 +0200 Subject: [PATCH] feat(interceptor): exo slide 17 jlq MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit j'abandonne l'idée de mettre à jour les headers custom, json-server a ses limites, il faudrait ajouter une ressource dans le fichier db et faire du post dessus. Un peu trop long finalement pour répondre à l'exercice. --- .../autocomplete/autocomplete.component.ts | 25 ++++++++------ src/app/interceptors/context.token.ts | 3 ++ src/app/interceptors/interceptor.service.ts | 24 ------------- src/app/interceptors/interceptor.ts | 34 ++++++++++--------- src/app/interceptors/logging.service.ts | 6 ++-- src/main.ts | 22 +++--------- 6 files changed, 42 insertions(+), 72 deletions(-) create mode 100644 src/app/interceptors/context.token.ts delete mode 100644 src/app/interceptors/interceptor.service.ts diff --git a/src/app/autocomplete/autocomplete.component.ts b/src/app/autocomplete/autocomplete.component.ts index 524eca5..d4e5202 100644 --- a/src/app/autocomplete/autocomplete.component.ts +++ b/src/app/autocomplete/autocomplete.component.ts @@ -1,8 +1,8 @@ -import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core'; -import { ClientService } from './client.service'; -import { Observable, Subscription, concatAll, concatMap, debounce, debounceTime, distinctUntilChanged, exhaustMap, filter, fromEvent, map, merge, mergeAll, mergeMap, switchAll, switchMap, tap } from 'rxjs'; -import { Client } from './client'; -import { CommonModule } from '@angular/common'; +import {AfterViewInit, Component, ElementRef, inject, ViewChild} from '@angular/core'; +import {ClientService} from './client.service'; +import {debounceTime, distinctUntilChanged, filter, fromEvent, map, Observable, switchMap} from 'rxjs'; +import {Client} from './client'; +import {CommonModule} from '@angular/common'; @Component({ selector: 'app-root', @@ -18,18 +18,21 @@ import { CommonModule } from '@angular/common'; `, styles: ` .item { - margin: 0px; - padding: 0px; - padding-left: 8px; - } + margin: 0px; + padding: 0px; + padding-left: 8px; + } + .item:hover { - background: #eee; - } + background: #eee; + } + .border { width: 500px; padding: 0px; margin: 0px } + input { width: 500px; margin-bottom: 0px diff --git a/src/app/interceptors/context.token.ts b/src/app/interceptors/context.token.ts new file mode 100644 index 0000000..5649b91 --- /dev/null +++ b/src/app/interceptors/context.token.ts @@ -0,0 +1,3 @@ +import {HttpContextToken} from "@angular/common/http"; + +export const USER_IS_LOGGED = new HttpContextToken(() => false) diff --git a/src/app/interceptors/interceptor.service.ts b/src/app/interceptors/interceptor.service.ts deleted file mode 100644 index 0c3c951..0000000 --- a/src/app/interceptors/interceptor.service.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; -import { Injectable, inject } from '@angular/core'; -import { Observable } from 'rxjs'; - -@Injectable() -export class LoggingInterceptor implements HttpInterceptor { - - intercept(req: HttpRequest, next: HttpHandler): Observable> { - - /* Squelette de l'exercice pour la version service - Pour que l'intercepteur fonctionne, voici les providers à utiliser dans le main.ts - providers: [ - provideHttpClient( - withInterceptors([ - loggingInterceptorFn - ]) - ) - ] - */ - console.log(req) - return next.handle(req) - } - -} diff --git a/src/app/interceptors/interceptor.ts b/src/app/interceptors/interceptor.ts index ba65d50..2663f0b 100644 --- a/src/app/interceptors/interceptor.ts +++ b/src/app/interceptors/interceptor.ts @@ -1,19 +1,21 @@ -import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http"; +import {HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest, HttpResponse} from "@angular/common/http"; +import {inject} from "@angular/core"; +import {LoggingService} from "./logging.service"; +import {tap} from "rxjs"; +import {USER_IS_LOGGED} from "./context.token"; + export const loggingInterceptorFn: HttpInterceptorFn = ( - req: HttpRequest, - next: HttpHandlerFn + req: HttpRequest, + next: HttpHandlerFn ) => { - /* Squelette de l'exercice pour la version fonction - Pour que l'intercepteur fonctionne, voici les providers à utiliser dans le main.ts - providers: [ - provideHttpClient( - withInterceptors([ - loggingInterceptorFn - ]) - ) - ] - */ - console.log(req) - return next(req) -} \ No newline at end of file + const loggingService = inject(LoggingService) + if (USER_IS_LOGGED) { + return next(req).pipe( + tap((event: HttpEvent) => { + loggingService.logEvent(event as HttpResponse) + }) + ) + } + return next(req) +} diff --git a/src/app/interceptors/logging.service.ts b/src/app/interceptors/logging.service.ts index 7c58f23..852351f 100644 --- a/src/app/interceptors/logging.service.ts +++ b/src/app/interceptors/logging.service.ts @@ -1,12 +1,12 @@ -import { HttpEvent, HttpResponse } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import {HttpResponse} from '@angular/common/http'; +import {Injectable} from '@angular/core'; @Injectable({ providedIn: 'root' }) export class LoggingService { - logEvent(event: HttpEvent) { + logEvent(event: HttpResponse) { console.log(event) } diff --git a/src/main.ts b/src/main.ts index b02d8d3..c958717 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,21 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { ApplicationConfig, bootstrapApplication } from '@angular/platform-browser'; -import { PipesArrayComponent } from './app/pipes-exercice/pipes-array.component'; -import { VideoPlayerComponent } from './app/video-player/video-player.component'; -import { AppModule } from './app/demo-project/app.module'; -import { AppComponent } from './app/demo-project/app.component'; -import { FolderComponent } from './app/folder-component/folder.component'; -import { TreeComponent } from './app/folder-component/tree.component'; -import { DependencyInjectionModule } from './app/dependency-injection/dependency-injection.module'; -import { HostComponent } from './app/host/host.component'; -import { ViewQueryComponent } from './app/view-query/view-query.component'; -import { MyAsyncComponent } from './app/rxjs/my-async.component'; -import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http'; -import { AutocompleteComponent } from './app/autocomplete/autocomplete.component'; -import { RxjsOperateursComponent } from './app/rxjs-operateurs/rxjs-operateurs.component'; -import { RxjsAppModule } from './app/rxjs-app/app/rxjs-app.module'; -import { loggingInterceptorFn } from './app/interceptors/interceptor'; -import { LoggingInterceptor } from './app/interceptors/interceptor.service'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {provideHttpClient, withInterceptors} from '@angular/common/http'; +import {AutocompleteComponent} from './app/autocomplete/autocomplete.component'; +import {loggingInterceptorFn} from './app/interceptors/interceptor'; /* platformBrowserDynamic().bootstrapModule(RxjsAppModule)