fix: use auth guard for angular

Author: d4rpx1

frontend/package-lock.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
+    "@auth0/angular-jwt": "^5.1.2",
     "ngx-cookie": "^6.0.1",
     "zone.js": "~0.11.4"
   },

frontend/package.json

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {LoginComponent} from "./login/login.component";
 import {HomeComponent} from "./home/home.component";
+import {AuthGuard} from "./guards/auth.guard";
 
 const routes: Routes = [
   { path: "login", component: LoginComponent },
-  { path: "home", component: HomeComponent },
-  { path: "", redirectTo: "/home", pathMatch: "full"}
+  { path: "home", component: HomeComponent, canActivate: [AuthGuard] },
+  { path: "**", redirectTo: "/home", pathMatch: "full"}
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

frontend/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { LoginComponent } from './login/login.component';
 import { HomeComponent } from './home/home.component';
 import {CookieModule} from "ngx-cookie";
+import {JWT_OPTIONS, JwtHelperService} from "@auth0/angular-jwt";
 
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@ import {CookieModule} from "ngx-cookie";
   ],
   exports: [
   ],
-  providers:[],
+  providers:[{ provide: JWT_OPTIONS, useValue: JWT_OPTIONS },
+    JwtHelperService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/src/app/app.module.ts

@@ -3,14 +3,16 @@ import {Account, Token} from "./stats.service";
 import {HttpClient, HttpErrorResponse, HttpHeaders} from "@angular/common/http";
 import {environment} from "../environments/environment";
 import {CookieService} from "ngx-cookie";
+import {JwtHelperService} from "@auth0/angular-jwt";
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
 
   constructor(private http: HttpClient,
-              private _cookieService: CookieService) { }
+              private _cookieService: CookieService,
+              private jwtHelper: JwtHelperService) { }
 
   public async login(username: string, password: string): Promise<boolean> {
     return new Promise<boolean>(res => {
@@ -44,7 +46,7 @@ export class AuthService {
   }
 
   public isLoggedIn(): boolean {
-    let str = this._cookieService.get("token");
-    return str != null;
+    let token = this._cookieService.get("token");
+    return token != null && !this.jwtHelper.isTokenExpired(token);
   }
 }

frontend/src/app/auth.service.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

frontend/src/app/guards/auth.guard.spec.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import { Observable } from 'rxjs';
+import {AuthService} from "../auth.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (!this.auth.isLoggedIn()) {
+      this.router.navigate(['login']);
+      return false;
+    }
+    return true;
+  }
+
+}

frontend/src/app/guards/auth.guard.ts

@@ -15,15 +15,10 @@ declare const genSkin: any;
 export class HomeComponent implements OnInit {
 
   constructor(private _authService: AuthService,
-              private _statsService: StatsService,
-              private router: Router) { }
+              private _statsService: StatsService) { }
 
 
   ngOnInit(): void {
-    if(!this._authService.isLoggedIn()) {
-      this.router.navigate(['login']);
-    }
-
     this._statsService.getSkinName().subscribe((skin: any) => {
       console.log(skin.skin);