activated interceptor.service.ts;

automatically checks if isAuthenticated():
 - if !isAuthenticated() (token expired), route to login and delete token from sessionStorage;
This commit is contained in:
Marco Zeisler 2021-05-03 18:38:46 +02:00
parent 4fe04eaa49
commit 163253866d
3 changed files with 30 additions and 36 deletions

View File

@ -4,7 +4,7 @@ import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module'; import {AppRoutingModule} from './app-routing.module';
import {LandingComponent} from './component/landing/landing.component'; import {LandingComponent} from './component/landing/landing.component';
import {RestService} from './services/rest.service'; import {RestService} from './services/rest.service';
import {HttpClientModule} from '@angular/common/http'; import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger'; import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
import {environment} from '../environments/environment'; import {environment} from '../environments/environment';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@ -30,6 +30,7 @@ import { EditierenComponent } from './component/einstellungen/editieren/editiere
import {MaterialFileInputModule} from 'ngx-material-file-input'; import {MaterialFileInputModule} from 'ngx-material-file-input';
import { DialogComponent } from './component/dialog/dialog.component'; import { DialogComponent } from './component/dialog/dialog.component';
import {MatDialogModule} from '@angular/material/dialog'; import {MatDialogModule} from '@angular/material/dialog';
import {InterceptorService} from './services/interceptor.service';
@NgModule({ @NgModule({
declarations: [LandingComponent, LoginComponent, NavigationComponent, declarations: [LandingComponent, LoginComponent, NavigationComponent,
@ -61,9 +62,9 @@ import {MatDialogModule} from '@angular/material/dialog';
AuthGuardService, AuthGuardService,
RestService, RestService,
JwtHelper, JwtHelper,
/*{ {
provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
},*/ },
], ],
bootstrap: [LandingComponent] bootstrap: [LandingComponent]

View File

@ -27,12 +27,18 @@ export class AuthService {
return sessionStorage.getItem(this.tokenKey); return sessionStorage.getItem(this.tokenKey);
} }
// Check whether the token is expired and return /**
// true or false * Check whether the token is expired and return true or false
* If false, removes token from sessionStorage.
*/
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
const token = sessionStorage.getItem(this.tokenKey); const token = sessionStorage.getItem(this.tokenKey);
if (token) { if (token) {
return !this.jwtHelper.isTokenExpired(token); const authenticated = !this.jwtHelper.isTokenExpired(token);
if (!authenticated) {
sessionStorage.removeItem(this.tokenKey);
}
return authenticated;
} else { } else {
return false; return false;
} }

View File

@ -1,9 +1,9 @@
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http'; import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';
import {NGXLogger} from 'ngx-logger'; import {NGXLogger} from 'ngx-logger';
import {AuthService} from './auth.service'; import {AuthService} from './auth.service';
import {Router} from '@angular/router';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -13,41 +13,28 @@ import {AuthService} from './auth.service';
*/ */
export class InterceptorService implements HttpInterceptor { export class InterceptorService implements HttpInterceptor {
constructor(private logger: NGXLogger, private authService: AuthService) { constructor(private logger: NGXLogger,
private authService: AuthService,
private router: Router
) {
} }
/** /**
* Intercepts every HTTP request and for example adds a token * Intercepts every HTTP request.
* If the token is invalid (expired) the user is redirected to logout (always).
* @param req http request * @param req http request
* @param next http response handler * @param next http response handler
*/ */
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// FOR TESTING ONLY - sets an expired token
// sessionStorage.setItem('loginToken', 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTk4ODYzNTF9.e83okQ1NHjeO-AxaB3SQP9P5UjOYy-e5DFissDdf2Mo');
const token = this.authService.getToken(); const authenticated = this.authService.isAuthenticated();
this.logger.debug('isAuthenticated?', authenticated);
// the original request is immutable, so we need to clone it if (!this.authService.isAuthenticated()) {
req = req.clone({ this.logger.debug('token invalid, route to login');
setHeaders: { this.router.navigate(['login']).then(() => {});
// FIXME e.g. if Bearer is used }
Authorization: `Bearer ${token}` return next.handle(req);
}
});
this.logger.debug('Interceptor works');
// pipe the response observable
return next.handle(req).pipe(
// perform a side effect for every emission on the source Observable
// return an Observable that is identical to the source
tap(event => {
// check if it is the response message
if (event instanceof HttpResponse) {
// TODO so something if necessary
}
}, error => {
// TODO handle error here
this.logger.error('HTTP Response interception error', error);
})
);
} }
} }