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 e5f1b2a..bea136a 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, true) + }, ) } 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..f2933d1 100644 --- a/src/app/interceptors/interceptor.ts +++ b/src/app/interceptors/interceptor.ts @@ -1,19 +1,44 @@ -import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http"; +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"; 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((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) : '' ) - ] - */ - console.log(req) + ) + } 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 7c58f23..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({ @@ -6,8 +6,13 @@ import { Injectable } from '@angular/core'; }) export class LoggingService { - logEvent(event: HttpEvent) { - console.log(event) + logEvent(event: HttpEvent | string) { + 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 b02d8d3..639caae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,8 +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 { LoggingInterceptor } from './app/interceptors/interceptor.service'; +import { loggingInterceptorFn, loggingRequestAndResponseFn } from './app/interceptors/interceptor'; /* platformBrowserDynamic().bootstrapModule(RxjsAppModule) @@ -26,7 +25,8 @@ bootstrapApplication(AutocompleteComponent, { providers: [ provideHttpClient( withInterceptors([ - loggingInterceptorFn + loggingInterceptorFn, + loggingRequestAndResponseFn, ]) ) ]