#17: update devAuthInterceptor(use function instead of class)

app.config.ts

@@ -9,21 +9,16 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideProtractorTestingSupport } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
-import {
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import routeConfig from 'src/app/routes';
-import { DevAuthInterceptor } from 'src/app/core/interceptors/dev-auth-interceptor.service';
+import { devAuthInterceptor } from 'src/app/core/interceptors/dev-auth-interceptor.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideProtractorTestingSupport(),
     provideRouter(routeConfig),
     provideAnimations(),
-    { provide: HTTP_INTERCEPTORS, useClass: DevAuthInterceptor, multi: true },
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withInterceptors([devAuthInterceptor])),
   ],
 };

src/app/core/interceptors/dev-auth-interceptor.service.ts

-import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
 import {
-  HttpEvent,
-  HttpHandler,
-  HttpInterceptor,
+  HttpHandlerFn,
+  HttpInterceptorFn,
   HttpRequest,
 } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { JwtTokenService } from '../services/auth/jwt-token.service';
 
-@Injectable()
-export class DevAuthInterceptor implements HttpInterceptor {
-  constructor(protected jwtTokenService: JwtTokenService) {}
-  intercept(
-    request: HttpRequest<unknown>,
-    next: HttpHandler,
-  ): Observable<HttpEvent<unknown>> {
-    // if the system is not in production, change the bearer for each http request
-    if (!environment.production) {
-      const modifiedReq = request.clone({
-        headers: request.headers.set(
-          'Authorization',
-          `Bearer ${this.jwtTokenService.getToken()}`,
-        ),
-      });
-      return next.handle(modifiedReq);
-    }
+export const devAuthInterceptor: HttpInterceptorFn = (
+  request: HttpRequest<unknown>,
+  next: HttpHandlerFn,
+) => {
+  const jwtTokenService = inject(JwtTokenService);
 
-    // if there is nothing to intercept, pass the request.
-    return next.handle(request);
+  if (environment.production) {
+    return next(request);
   }
-}
+
+  return jwtTokenService.getToken().pipe(
+    switchMap((token) => {
+      if (token) {
+        // Ensure token is a non-null string
+        const authReq = request.clone({
+          headers: request.headers.set('Authorization', `Bearer ${token}`),
+        });
+        return next(authReq);
+      }
+      // If no token, forward the original request
+      return next(request.clone());
+    }),
+  );
+};