Fix: Auth Bcakground reload after auth

src/app/core/auth/auth.service.ts

@@ -1,28 +1,26 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, GuardResult, MaybeAsync, RedirectCommand, Router } from '@angular/router';
 import UserData from '@core/auth/UserData';
+import { OpenAPI } from '@core/ems';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { Observable } from 'rxjs';
-
-import { OpenAPI } from '../ems';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AuthService implements CanActivate {
-    public $user: Observable<UserData | undefined>;
+    public $user: BehaviorSubject<UserData | undefined>;
 
     constructor(private readonly oidcSecurityService: OidcSecurityService, private router: Router) {
-        this.$user = new Observable((publish) => {
-            this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData }) => {
-                publish.next(isAuthenticated ? {
+        this.$user = new BehaviorSubject<UserData | undefined>(undefined);
+        this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken }) => {
+            OpenAPI.TOKEN = accessToken;
+            const isLoggedIn = isAuthenticated && userData != null && accessToken != '';
+            this.$user.next(isLoggedIn ? {
                 username: userData.preferred_username,
                 verified: userData.email_verified
             } : undefined);
         });
-        });
-        this.oidcSecurityService.getAccessToken().subscribe(token => OpenAPI.TOKEN = token);
-
     }
 
     canActivate(): MaybeAsync<GuardResult> {

src/app/views/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import {Component} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -14,7 +14,7 @@ import Filter from '@app/views/dashboard/Filter';
 import { AuthService } from '@core/auth/auth.service';
 import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
 import { NotificationService, NotificationType } from '@core/notification/notification.service';
-import {Observable} from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 @Component({
     selector: 'app-dashboard',
@@ -22,13 +22,13 @@ import {Observable} from 'rxjs';
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
     selectedQualificationFilter: Qualification | undefined;
     fuzzyFilter: string = '';
 
     employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
     employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
-    $qualifications: Observable<Array<Qualification> | undefined>;
+    $qualifications: Observable<Array<Qualification> | undefined> = of();
 
     constructor(
         protected auth: AuthService,
@@ -36,7 +36,12 @@ export class DashboardComponent {
         private qualificationService: QualificationService,
         private dialog: MatDialog,
         private notifications: NotificationService
-    ) {
+    ) { }
+    ngOnInit(): void {
+        this.auth.$user.subscribe((user) => {
+            if (user === undefined) {
+                return;
+            }
             this.$qualifications = this.qualificationService.getAllQualifications();
             this.employeeService.getAllEmployees().subscribe((employees) => {
                 this.employeeDataSource = new MatTableDataSource(employees);
@@ -66,6 +71,7 @@ export class DashboardComponent {
                 };
 
             });
+        });
     }
 
     onDelete(employee: Employee) {