From 894cd812ec9a3b7cbb23ca816c78e005cfbf3044 Mon Sep 17 00:00:00 2001 From: Nicolas Chapgier Date: Thu, 18 Apr 2024 15:06:18 +0200 Subject: [PATCH 1/2] coucou --- src/app/autocomplete/client.service.ts | 8 +++-- src/app/interceptors/context-token.ts | 5 +++ src/app/interceptors/interceptor.service.ts | 40 ++++++++++----------- src/app/interceptors/interceptor.ts | 22 ++++++++++-- src/app/interceptors/logging.service.ts | 2 +- src/main.ts | 1 - 6 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 src/app/interceptors/context-token.ts diff --git a/src/app/autocomplete/client.service.ts b/src/app/autocomplete/client.service.ts index e5f1b2a..19e6dfa 100644 --- a/src/app/autocomplete/client.service.ts +++ b/src/app/autocomplete/client.service.ts @@ -1,7 +1,8 @@ -import { HttpClient, HttpParams } from '@angular/common/http'; +import { HttpClient, HttpContext, HttpParams } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; import { Observable } from 'rxjs'; import { Client } from './client'; +import { IS_LOGGING_ENABLED } from '../interceptors/context-token'; @Injectable({ providedIn: 'root' @@ -19,7 +20,10 @@ export class ClientService { return this._http.get( this.CLIENT_URL, - { params: params } + { + params: params, + context: new HttpContext().set(IS_LOGGING_ENABLED, false) + }, ) } diff --git a/src/app/interceptors/context-token.ts b/src/app/interceptors/context-token.ts new file mode 100644 index 0000000..1d2cee7 --- /dev/null +++ b/src/app/interceptors/context-token.ts @@ -0,0 +1,5 @@ +// Time code : 1h24 + +import { HttpContextToken } from "@angular/common/http"; + +export const IS_LOGGING_ENABLED = new HttpContextToken(() => false) \ No newline at end of file diff --git a/src/app/interceptors/interceptor.service.ts b/src/app/interceptors/interceptor.service.ts index 0c3c951..363dbde 100644 --- a/src/app/interceptors/interceptor.service.ts +++ b/src/app/interceptors/interceptor.service.ts @@ -1,24 +1,24 @@ -import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; -import { Injectable, inject } from '@angular/core'; -import { Observable } from 'rxjs'; +// 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 { +// @Injectable() +// export class LoggingInterceptor implements HttpInterceptor { - intercept(req: HttpRequest, next: HttpHandler): Observable> { +// 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) - } +// /* 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..8541bb6 100644 --- a/src/app/interceptors/interceptor.ts +++ b/src/app/interceptors/interceptor.ts @@ -1,4 +1,8 @@ import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http"; +import { tap } from "rxjs"; +import { LoggingService } from "./logging.service"; +import { inject } from "@angular/core"; +import { IS_LOGGING_ENABLED } from "./context-token"; export const loggingInterceptorFn: HttpInterceptorFn = ( req: HttpRequest, @@ -11,9 +15,21 @@ export const loggingInterceptorFn: HttpInterceptorFn = ( withInterceptors([ loggingInterceptorFn ]) - ) + )² ] */ - console.log(req) - return next(req) + const loggingService = inject(LoggingService); + const isLogged = req.context.get(IS_LOGGING_ENABLED); + + + if (isLogged) { + return next(req).pipe( + tap(e => loggingService.logEvent(e)) + ) + } else { + return next(req).pipe( + tap(() => console.log("Requête : ", req)), + tap(() => loggingService.logEvent(`isLogged : ${isLogged}`)) + ) + } } \ No newline at end of file diff --git a/src/app/interceptors/logging.service.ts b/src/app/interceptors/logging.service.ts index 7c58f23..1dba9e0 100644 --- a/src/app/interceptors/logging.service.ts +++ b/src/app/interceptors/logging.service.ts @@ -6,7 +6,7 @@ import { Injectable } from '@angular/core'; }) export class LoggingService { - logEvent(event: HttpEvent) { + logEvent(event: HttpEvent | string) { console.log(event) } diff --git a/src/main.ts b/src/main.ts index b02d8d3..cbd3f9f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -15,7 +15,6 @@ 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'; /* platformBrowserDynamic().bootstrapModule(RxjsAppModule) From cfaf2d6699d4681513e3dd8285471094e767d9ab Mon Sep 17 00:00:00 2001 From: Nicolas Chapgier Date: Thu, 18 Apr 2024 16:53:09 +0200 Subject: [PATCH 2/2] =?UTF-8?q?ajout=20de=20la=20m=C3=A9thode=20permettant?= =?UTF-8?q?=20de=20log=20requ=C3=AAte=20et=20response,=20ajout=20du=20filt?= =?UTF-8?q?er=20pour=20ne=20pas=20avoir=20de=20double=20response?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../autocomplete/autocomplete.component.ts | 2 +- src/app/autocomplete/client.service.ts | 2 +- src/app/interceptors/interceptor.ts | 47 +++++++++++-------- src/app/interceptors/logging.service.ts | 9 +++- src/main.ts | 5 +- 5 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/app/autocomplete/autocomplete.component.ts b/src/app/autocomplete/autocomplete.component.ts index 524eca5..e59da5d 100644 --- a/src/app/autocomplete/autocomplete.component.ts +++ b/src/app/autocomplete/autocomplete.component.ts @@ -21,7 +21,7 @@ import { CommonModule } from '@angular/common'; margin: 0px; padding: 0px; padding-left: 8px; - } + } .item:hover { background: #eee; } diff --git a/src/app/autocomplete/client.service.ts b/src/app/autocomplete/client.service.ts index 19e6dfa..bea136a 100644 --- a/src/app/autocomplete/client.service.ts +++ b/src/app/autocomplete/client.service.ts @@ -22,7 +22,7 @@ export class ClientService { this.CLIENT_URL, { params: params, - context: new HttpContext().set(IS_LOGGING_ENABLED, false) + context: new HttpContext().set(IS_LOGGING_ENABLED, true) }, ) } diff --git a/src/app/interceptors/interceptor.ts b/src/app/interceptors/interceptor.ts index 8541bb6..f2933d1 100644 --- a/src/app/interceptors/interceptor.ts +++ b/src/app/interceptors/interceptor.ts @@ -1,5 +1,5 @@ -import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http"; -import { tap } from "rxjs"; +import { HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest, HttpResponse } from "@angular/common/http"; +import { filter, tap } from "rxjs"; import { LoggingService } from "./logging.service"; import { inject } from "@angular/core"; import { IS_LOGGING_ENABLED } from "./context-token"; @@ -8,28 +8,37 @@ export const loggingInterceptorFn: HttpInterceptorFn = ( 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 - ]) - )² - ] - */ + const loggingService = inject(LoggingService); const isLogged = req.context.get(IS_LOGGING_ENABLED); - + if (isLogged) { return next(req).pipe( - tap(e => loggingService.logEvent(e)) - ) - } else { - return next(req).pipe( - tap(() => console.log("Requête : ", req)), - tap(() => loggingService.logEvent(`isLogged : ${isLogged}`)) + tap((resp) => resp instanceof HttpResponse ? loggingService.logEvent(resp) : '') ) } + return next(req).pipe( + tap(() => loggingService.logEvent(`isLogged : ${isLogged}`)) + ) + +} + +export const loggingRequestAndResponseFn: HttpInterceptorFn = ( + req: HttpRequest, + next: HttpHandlerFn +) => { + + const loggingService = inject(LoggingService); + const isLogged = req.context.get(IS_LOGGING_ENABLED); + + + if (isLogged) { + return next(req).pipe( + tap( + (resp) => resp instanceof HttpResponse ? loggingService.logRequestAndresponse(req, resp) : '' + ) + ) + } + return next(req) } \ No newline at end of file diff --git a/src/app/interceptors/logging.service.ts b/src/app/interceptors/logging.service.ts index 1dba9e0..5cefc9b 100644 --- a/src/app/interceptors/logging.service.ts +++ b/src/app/interceptors/logging.service.ts @@ -1,4 +1,4 @@ -import { HttpEvent, HttpResponse } from '@angular/common/http'; +import { HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable({ @@ -7,7 +7,12 @@ import { Injectable } from '@angular/core'; export class LoggingService { logEvent(event: HttpEvent | string) { - console.log(event) + console.log("logEvent : ", event) } + logRequestAndresponse(request: HttpRequest, resp: HttpEvent) { + console.warn("log Request : ", request) + console.warn("log Response : ", resp) + } + } diff --git a/src/main.ts b/src/main.ts index cbd3f9f..639caae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,7 +14,7 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptor 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 { loggingInterceptorFn, loggingRequestAndResponseFn } from './app/interceptors/interceptor'; /* platformBrowserDynamic().bootstrapModule(RxjsAppModule) @@ -25,7 +25,8 @@ bootstrapApplication(AutocompleteComponent, { providers: [ provideHttpClient( withInterceptors([ - loggingInterceptorFn + loggingInterceptorFn, + loggingRequestAndResponseFn, ]) ) ]