Fixed login state problems #70

kdb-web/src/app/app.component.html

@@ -1,5 +1,5 @@
 <main [class]="themeName">
-  <ng-container *ngIf="authService.isLoggedIn; else login">
+  <ng-container *ngIf="isLoggedIn; else login">
     <app-header></app-header>
 
     <section class="app">

kdb-web/src/app/app.component.ts

@@ -16,7 +16,7 @@ export class AppComponent implements OnInit {
   isLoggedIn: boolean = false;
 
   constructor(
-    public authService: AuthService,
+    private authService: AuthService,
     private themeService: ThemeService,
     private socket: SocketService
   ) { }
@@ -28,9 +28,12 @@ export class AppComponent implements OnInit {
     this.themeService.themeName$.subscribe(value => {
       this.themeName = value;
     });
+    this.authService.isLoggedIn$.subscribe(value => {
+      this.isLoggedIn = value;
+    });
 
-    this.socket.startSocket();
     this.themeService.loadTheme();
+    this.socket.startSocket();
   }
 
 

kdb-web/src/app/services/auth/auth.service.ts

@@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { firstValueFrom, Observable, Subscription } from 'rxjs';
+import { firstValueFrom, Observable, Subject, Subscription } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { AdminUpdateUserDTO } from 'src/app/models/auth/admin-update-user.dto';
 import { AuthRoles } from 'src/app/models/auth/auth-roles.enum';
@@ -21,8 +21,8 @@ import { SpinnerService } from '../spinner/spinner.service';
 })
 export class AuthService {
 
-  invalidLogin!: boolean;
-  isLoggedIn!: boolean;
+  private isLoggedIn!: boolean;
+  isLoggedIn$ = new Subject<boolean>();
 
   constructor(
     private appsettings: SettingsService,
@@ -31,7 +31,9 @@ export class AuthService {
     private jwtHelper: JwtHelperService,
     private spinnerService: SpinnerService
   ) {
-    this.isUserLoggedInAsync();
+    this.isLoggedIn$.subscribe(value => {
+      this.isLoggedIn = value;
+    });
   }
 
   /* data requests */
@@ -187,14 +189,20 @@ export class AuthService {
         })
       }).pipe(catchError((error: any) => {
         error.error = null;
+        this.isLoggedIn$.next(false);
+        localStorage.removeItem('rjwt');
+        this.router.navigate(['/auth/login']);
         throw error;
       })).subscribe(() => {
-        this.isLoggedIn = false;
+        this.isLoggedIn$.next(false);
         localStorage.removeItem('jwt');
         localStorage.removeItem('rjwt');
         this.router.navigate(['/auth/login']);
       });
     }
+    this.isLoggedIn$.next(false);
+    localStorage.removeItem('rjwt');
+    this.router.navigate(['/auth/login']);
 
     return null
   }
@@ -203,15 +211,19 @@ export class AuthService {
     const token = this.getToken();
 
     if (!token || !token.refreshToken) {
-      this.isLoggedIn = false;
+      this.isLoggedIn$.next(false);
       return false;
     }
 
-    const verifiedLogin = await firstValueFrom(await this.verifyLogin());
-
-    if (verifiedLogin) {
-      this.isLoggedIn = true;
-      return true;
+    try {
+      const verifiedLogin = await firstValueFrom(this.verifyLogin());
+      if (verifiedLogin) {
+        this.isLoggedIn$.next(true);
+        return true;
+      }
+    } catch (error: unknown) {
+      this.isLoggedIn$.next(false);
+      return false;
     }
 
     if (this.isLoggedIn) {
@@ -229,14 +241,12 @@ export class AuthService {
     return false;
   }
 
-  hasUserPermission(role: AuthRoles): Promise<boolean> {
-    return this.isUserLoggedInAsync().then(isLoggedIn => {
-      if (!role || !isLoggedIn) {
-        return false;
-      }
-      const token = this.getDecodedToken();
-      return AuthRoles[token['role']] === AuthRoles[role];
-    });
+  async hasUserPermission(role: AuthRoles): Promise<boolean> {
+    if (!role || !await this.isUserLoggedInAsync()) {
+      return false;
+    }
+    const token = this.getDecodedToken();
+    return AuthRoles[token['role']] === AuthRoles[role];
   }
 
   getEMailFromDecodedToken(token: { [key: string]: any }): string | null {

kdb-web/src/app/services/socket/socket.service.ts

@@ -20,10 +20,10 @@ export class SocketService {
     private spinnerService: SpinnerService,
     private messageService: MessageService,
   ) {
-    this.socket = io(`${settingsService.getApiURL()}`)
   }
 
   startSocket() {
+    this.socket = io(`${this.settingsService.getApiURL()}`)
     this.socket.on('connect', () => {
       if (this.disconnected) {
         if (this.spinnerService.showSpinnerState) {