Add http error interceptor in order to sign out the user and redirect to the...

Add http error interceptor in order to sign out the user and redirect to the login page when an error 401 is catched

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { AppRoutingModule } from './app.routing.module';
 import { AppServices, AppConfigService } from './services';
@@ -11,6 +11,7 @@ import { AppComponents } from './components';
 import { UserModule } from './user/user.module';
 import { UserService } from './user/services';
 import { AppDirectives } from './directives';
+import { HttpErrorResponseInterceptor } from './interceptors/http-error-response-interceptor';
 
 // Function used by APP_INITIALIZER before the app start: init user info / statut (expect a promise)
 export function initUserService(authService: UserService) {
@@ -49,6 +50,11 @@ export function initAppConfig(appConfigService: AppConfigService) {
   ],
   providers: [
     ...AppServices,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: HttpErrorResponseInterceptor,
+      multi: true,
+    },
     {
       provide: APP_INITIALIZER,
       useFactory: initUserService,

src/app/interceptors/http-error-response-interceptor.ts

+// http-service-interceptor.ts
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import {
+  HttpInterceptor, HttpRequest, HttpHandler,
+  HttpEvent, HttpResponse, HttpErrorResponse,
+} from '@angular/common/http';
+import { tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { UserService } from '../user/services';
+
+@Injectable()
+export class HttpErrorResponseInterceptor implements HttpInterceptor {
+  constructor(
+    private router: Router,
+    private _userService: UserService,
+  ) { }
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(tap(
+      (event: HttpEvent<any>) => {
+        if (event instanceof HttpResponse) {
+          return event;
+        }
+      },
+      (err) => {
+        if (err instanceof HttpErrorResponse) {
+          switch (err.status) {
+            case 401:
+              console.log('HTTP ERROR: Unauthenticated');
+              this._userService.resetAuth();
+              this.router.navigate(['/login']);
+              break;
+            case 403:
+              console.log('HTTP ERROR: Forbidden');
+              break;
+            case 404:
+              console.log('HTTP ERROR: Not Found');
+              break;
+            case 500:
+            case 502:
+            case 503:
+            case 504:
+              console.log('HTTP ERROR: Server Error');
+              break;
+            default:
+              console.log(`HTTP ERROR: Status code ${err.status}`);
+          }
+        }
+      }),
+    );
+  }
+}