401 unauthorized requests now redirect users to the login page

src/app/app.module.ts

@@ -32,7 +32,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
 import { FileCardComponent } from './file-card/file-card.component';
 import { RouterModule } from '@angular/router';
@@ -85,6 +85,7 @@ import { CustomPlaylistsComponent } from './components/custom-playlists/custom-p
 import { EditCategoryDialogComponent } from './dialogs/edit-category-dialog/edit-category-dialog.component';
 import { TwitchChatComponent } from './components/twitch-chat/twitch-chat.component';
 import { LinkifyPipe, SeeMoreComponent } from './components/see-more/see-more.component';
+import { H401Interceptor } from './http.interceptor';
 
 registerLocaleData(es, 'es');
 
@@ -191,7 +192,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     SettingsComponent
   ],
   providers: [
-    PostsService
+    PostsService,
+    { provide: HTTP_INTERCEPTORS, useClass: H401Interceptor, multi: true }
   ],
   exports: [
     HighlightPipe,

src/app/components/login/login.component.ts

@@ -27,7 +27,7 @@ export class LoginComponent implements OnInit {
   constructor(private postsService: PostsService, private snackBar: MatSnackBar, private router: Router) { }
 
   ngOnInit(): void {
-    if (this.postsService.isLoggedIn) {
+    if (this.postsService.isLoggedIn && localStorage.getItem('jwt_token') !== 'null') {
       this.router.navigate(['/home']);
     }
     this.postsService.service_initialized.subscribe(init => {

src/app/http.interceptor.ts

@@ -0,0 +1,34 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable()
+export class H401Interceptor implements HttpInterceptor {
+
+    constructor(private router: Router, private snackBar: MatSnackBar) { }
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        return next.handle(request).pipe(catchError(err => {
+            if (err.status === 401) {
+                localStorage.setItem('jwt_token', null);
+                if (this.router.url !== '/login') {
+                    this.router.navigate(['/login']).then(() => {
+                        this.openSnackBar('Login expired, please login again.');
+                    });
+                }
+            }
+
+            const error = err.error.message || err.statusText;
+            return throwError(error);
+        }));
+    }
+
+    public openSnackBar(message: string, action: string = '') {
+        this.snackBar.open(message, action, {
+          duration: 2000,
+        });
+      }
+}