Home should hide content when token expires

web-app/projects/core-lib/user/user.model.ts

@@ -41,7 +41,7 @@ export interface User {
    * The authorization role of this user account that defines the actions this
    * user account has permission to perform
    */
-  roleId: string
+  role: string
   email?: string
   /**
    * URL of the image that identifies this user account in the user feed, etc.;

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

@@ -1,4 +1,4 @@
-<div *ngIf="user" class="home">
+<div *ngIf="myself" class="home">
   <banner [banner]="banners?.header">Hello</banner>
 
   <navigation (onFeedToggle)="feed.toggle()" (onPreferencesToggle)="preferences.toggle()"></navigation>

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

@@ -7,6 +7,8 @@ import { ActivatedRoute } from '@angular/router';
 import { User } from 'core-lib-src/user';
 import { Banners, SettingsService } from '../setttings/settings.service';
 import * as _ from 'underscore';
+import { UserService } from '../user/user.service';
+import { MageEvent } from '@ngageoint/mage.web-core-lib/event';
 
 @Component({
   selector: 'home',
@@ -16,28 +18,33 @@ import * as _ from 'underscore';
 export class HomeComponent implements OnInit, OnDestroy {
 
   banners: Banners
-  user: User
   map: any
-  event: any
+  myself: User
+  event: MageEvent
   hideFeed: boolean = false
   newObservation: any
 
   @ViewChild('feed') feed: MatSidenav
 
   constructor(
     private mapService: MapService,
+    private userService: UserService,
     private filterService: FilterService,
     private locationService: LocationService,
     private settingsService: SettingsService,
     private activatedRoute: ActivatedRoute
-  ) { }
+  ) {
+    this.userService.myself$.subscribe((myself: User) => {
+      this.myself = myself
+    })
+  }
 
   ngOnInit(): void {
     this.filterService.addListener(this)
     this.mapService.addListener(this)
 
     this.activatedRoute.data.subscribe(({ user }) => {
-      this.user = user
+      this.myself = user
     })
 
     this.settingsService.getBanner().subscribe((banners: Banners) => {

web-app/src/app/http/token.interceptor.ts

@@ -4,6 +4,7 @@ import { catchError, Observable, Subject, switchMap, throwError } from 'rxjs';
 import { LocalStorageService } from './local-storage.service';
 import { AuthenticationDialogComponent } from '../ingress/authentication/authentication-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
+import { UserService } from '../user/user.service';
 
 export const BYPASS_TOKEN = new HttpContextToken(() => false);
 
@@ -16,6 +17,7 @@ export class TokenInterceptorService implements HttpInterceptor {
 
   constructor(
     public dialog: MatDialog,
+    private userService: UserService,
     private localStorageService: LocalStorageService
   ) { }
 
@@ -30,6 +32,7 @@ export class TokenInterceptorService implements HttpInterceptor {
         catchError((error) => {
           if (error instanceof HttpErrorResponse) {
             if (error.status === HttpStatusCode.Unauthorized) {
+              this.userService.setUser(null)
               if (!this.isRefreshingToken) {
                 this.isRefreshingToken = true
                 this.dialog.open(AuthenticationDialogComponent, {

web-app/src/app/user/user.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpContext, HttpEvent } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Observable, Subject, tap } from 'rxjs'
+import { BehaviorSubject, Observable, Subject, tap } from 'rxjs'
 import { LocalStorageService } from '../http/local-storage.service'
 import { BYPASS_TOKEN } from '../http/token.interceptor'
 import { User } from 'core-lib-src/user'
@@ -9,9 +9,11 @@ import { User } from 'core-lib-src/user'
   providedIn: 'root'
 })
 export class UserService {
+  amAdmin: boolean
 
+  private _myself = new BehaviorSubject<any>(null)
   myself: any
-  amAdmin: boolean
+  myself$ = this._myself.asObservable()
 
   constructor(
     private httpClient: HttpClient,
@@ -102,7 +104,8 @@ export class UserService {
   }
 
   setUser(user: any) {
-    this.myself = user;
+    this._myself.next(user)
+    this.myself = user
     // TODO don't just check for role name
     this.amAdmin = this.myself && this.myself.role && (this.myself.role.name === "ADMIN_ROLE" || this.myself.role.name === 'EVENT_MANAGER_ROLE');
   }