diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index f883e04c2b54df54e15f9713c3c0f29e0ca5ba5c..6ad5852607b4366d9b3e425b23e6c75091c51fb8 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -12,4 +12,4 @@ <div class="wrapper"> <router-outlet></router-outlet> -</div> +</div> \ No newline at end of file diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 6f97d4ed7d36e142c6cfd9a63f139cd068d6a94d..cc061ccd82009ac4a6add0a0df0b8e701e1c8d42 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,5 +1,4 @@ -import { Component - } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', @@ -7,5 +6,5 @@ import { Component styleUrls: ['./app.component.scss'] }) export class AppComponent { - title = 'client'; + title: string = 'client'; } diff --git a/client/src/app/authentication/auth.service.ts b/client/src/app/authentication/auth.service.ts index 626aff1cab4f26835a5401cb663f74c2b6d828ef..0d86deefb6903edb9943838c011c88d46e122c42 100644 --- a/client/src/app/authentication/auth.service.ts +++ b/client/src/app/authentication/auth.service.ts @@ -2,6 +2,7 @@ import { HttpClient, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/c import { Injectable } from '@angular/core'; import { User } from '../models/user.model'; import { tap, shareReplay } from 'rxjs/operators'; +import { Router } from '@angular/router'; interface IUserLogin { username: string; @@ -14,7 +15,7 @@ interface IUserLogin { export class AuthService { loginUrl = "api/user/login" - constructor(private http: HttpClient) { } + constructor(private http: HttpClient, private router: Router) { } login(body: IUserLogin): Promise<string> { return new Promise<string>( @@ -42,7 +43,26 @@ export class AuthService { console.log(authResult); localStorage.setItem('token', authResult.token); } - + checkTokenExpiration() { + const token = localStorage.getItem("token"); + if (token) { + const {iat, exp} = JSON.parse(atob(token?.split(".")[1])); + if (iat && exp) { + const issued = new Date(iat*1000); + const expires = new Date(exp*1000); + const now = new Date(); + // Expired token + if (now < issued || now >= expires) { + this.logout(); + this.router.navigateByUrl("/"); + return false + } + return true; + } + } + this.router.navigateByUrl("/") + return false + } logout() { localStorage.removeItem("token"); } diff --git a/client/src/app/users/user-profile/user-profile.component.ts b/client/src/app/users/user-profile/user-profile.component.ts index d818b70a706432d1ae6b7f1e236ef462083019fe..53be4cceb4ffa0990d2be78603cd6f42361c75a3 100644 --- a/client/src/app/users/user-profile/user-profile.component.ts +++ b/client/src/app/users/user-profile/user-profile.component.ts @@ -16,17 +16,18 @@ export class UserProfileComponent implements OnInit { constructor(private userService: UserService, private authService: AuthService, private router: Router) { } ngOnInit(): void { - const token = localStorage.getItem('token'); - if (!token) this.router.navigateByUrl("/"); - // Get user data from JWT token - const user_data = JSON.parse(atob(token.split(".")[1])).data[0]; - console.log(user_data) - // Gets all categories and displays them in dropdown - this.userService.getUser(user_data.userId).then(user => { - this.user = user; - }).catch (error => { - console.log("Error getting user: " + error); - }); + // Check for token expiration + if (this.authService.checkTokenExpiration()) { // redirects to "/" if token is expired + const token = localStorage.getItem('token'); + // Get user data from JWT token + const user_data = JSON.parse(atob(token.split(".")[1])).data[0]; + // Gets all user information and displays them in the component + this.userService.getUser(user_data.userId).then(user => { + this.user = user; + }).catch (error => { + console.log("Error getting user: " + error); + }); + } + } - }