Make authentication work with interceptors

src/app/app.module.ts

@@ -6,9 +6,11 @@ import {AppComponent} from './components/app.component';
 import {HelloComponent} from './components/hello/hello.component';
 import {BASE_PATH} from '../gen';
 import {environment} from '../environments/environment';
-import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 import { LoginComponent } from './components/login/login.component';
 import {FormsModule} from '@angular/forms';
+import {RequestInterceptor} from './interceptors/request.interceptor';
+import {UnauthorizedInterceptor} from './interceptors/unauthorizedResponseInterceptor';
 
 @NgModule({
   declarations: [
@@ -23,6 +25,8 @@ import {FormsModule} from '@angular/forms';
   ],
   providers: [
     {provide: BASE_PATH, useValue: environment.apiBasePath},
+    {provide: HTTP_INTERCEPTORS, useClass: UnauthorizedInterceptor, multi: true},
+    {provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true},
     provideHttpClient(withInterceptorsFromDi())
   ],
   bootstrap: [AppComponent]

src/app/interceptors/request.interceptor.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { requestInterceptor } from './request.interceptor';
+
+describe('requestInterceptor', () => {
+  const interceptor: HttpInterceptorFn = (req, next) => 
+    TestBed.runInInjectionContext(() => requestInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/interceptors/request.interceptor.ts

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {AuthService} from '../services/auth.service';
+
+@Injectable()
+export class RequestInterceptor implements HttpInterceptor {
+  constructor(private authService: AuthService) {
+  }
+
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    const authToken = this.authService.getToken() || '';
+
+    const newReq = req.clone({
+      headers: req.headers.set('Authorization', `Bearer ${authToken}`),
+    });
+
+    return next.handle(newReq);
+  }
+}

src/app/interceptors/unauthorizedResponseInterceptor.ts

@@ -0,0 +1,24 @@
+import {Injectable} from '@angular/core';
+import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {catchError} from 'rxjs/operators';
+import {Router} from '@angular/router';
+import {AuthService} from '../services/auth.service';
+
+@Injectable()
+export class UnauthorizedInterceptor implements HttpInterceptor {
+  constructor(private authService: AuthService, private router: Router) {
+  }
+
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    return next.handle(req).pipe(
+      catchError((error: HttpErrorResponse) => {
+        if (error.status === 401) {
+          this.authService.clearToken();
+          this.router.navigate(["/login"]);
+        }
+        return throwError(() => error);
+      })
+    );
+  }
+}

src/app/interceptors/unauthorizedresponse.interceptor.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { unauthorizedResponseInterceptor } from './unauthorizedResponseInterceptor';
+
+describe('unauthorizedresponseInterceptor', () => {
+  const interceptor: HttpInterceptorFn = (req, next) =>
+    TestBed.runInInjectionContext(() => unauthorizedResponseInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(interceptor).toBeTruthy();
+  });
+});