From 7e06d30205ec81deb970af37c09e52430b441d60 Mon Sep 17 00:00:00 2001 From: Isaac Abadi Date: Sat, 19 Dec 2020 13:03:49 -0500 Subject: [PATCH] 401 unauthorized requests now redirect users to the login page --- src/app/app.module.ts | 6 ++-- src/app/components/login/login.component.ts | 2 +- src/app/http.interceptor.ts | 34 +++++++++++++++++++++ 3 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 src/app/http.interceptor.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6ef4efd..0ae868f 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index d5c5816..edf7f99 100644 --- a/src/app/components/login/login.component.ts +++ b/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 => { diff --git a/src/app/http.interceptor.ts b/src/app/http.interceptor.ts new file mode 100644 index 0000000..edde22b --- /dev/null +++ b/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, next: HttpHandler): Observable> { + 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, + }); + } +} \ No newline at end of file