front-end fix: should logout all tabs; should reload tabs on fresh login

Author: changhuixu

angular/src/app/core/guards/auth.guard.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AuthService } from '../services/auth.service';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -23,14 +24,17 @@ export class AuthGuard implements CanActivate {
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
-    const user = this.authService.currentUser;
-    if (user) {
-      return true;
-    } else {
-      this.router.navigate(['login'], {
-        queryParams: { returnUrl: state.url },
-      });
-      return false;
-    }
+    return this.authService.user$.pipe(
+      map((user) => {
+        if (user) {
+          return true;
+        } else {
+          this.router.navigate(['login'], {
+            queryParams: { returnUrl: state.url },
+          });
+          return false;
+        }
+      })
+    );
   }
 }

angular/src/app/core/interceptors/unauthorized.interceptor.ts

@@ -23,11 +23,8 @@ export class UnauthorizedInterceptor implements HttpInterceptor {
       catchError((err) => {
         if (err.status === 401) {
           this.authService.clearLocalStorage();
-          if (this.authService.currentUser) {
-            this.authService.logout();
-          } else {
-            this.router.navigate(['']);
-          }
+          this.router.navigate(['login']);
+          return;
         }
 
         if (!environment.production) {

angular/src/app/core/models/application-user.ts

@@ -1,6 +1,4 @@
 export interface ApplicationUser {
   username: string;
   role: string;
-  accessToken: string;
-  refreshToken: string;
 }

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

@@ -1,35 +1,56 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { map, tap, delay, finalize } from 'rxjs/operators';
 import { ApplicationUser } from '../models/application-user';
 import { environment } from 'src/environments/environment';
 
+interface LoginResult {
+  username: string;
+  role: string;
+  accessToken: string;
+  refreshToken: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
-export class AuthService {
+export class AuthService implements OnDestroy {
   private readonly apiUrl = `${environment.apiUrl}api/account`;
   private timer: Subscription;
   private _user = new BehaviorSubject<ApplicationUser>(null);
-  public user$: Observable<ApplicationUser> = this._user.asObservable();
+  user$: Observable<ApplicationUser> = this._user.asObservable();
+
+  private storageEventListener(event: StorageEvent) {
+    if (event.storageArea === localStorage) {
+      if (event.key === 'logout-event') {
+        this._user.next(null);
+      }
+      if (event.key === 'login-event') {
+        location.reload();
+      }
+    }
+  }
 
-  constructor(private router: Router, private http: HttpClient) {}
+  constructor(private router: Router, private http: HttpClient) {
+    window.addEventListener('storage', this.storageEventListener.bind(this));
+  }
 
-  public get currentUser(): ApplicationUser {
-    return this._user.value;
+  ngOnDestroy(): void {
+    window.removeEventListener('storage', this.storageEventListener.bind(this));
   }
 
   login(username: string, password: string) {
     return this.http
-      .post<ApplicationUser>(`${this.apiUrl}/login`, { username, password })
+      .post<LoginResult>(`${this.apiUrl}/login`, { username, password })
       .pipe(
-        map((user) => {
-          this._user.next(user);
-          this.setLocalStorage(user);
+        map((x) => {
+          this._user.next({ username: x.username, role: x.role });
+          this.setLocalStorage(x);
+          localStorage.setItem('login-event', 'login' + Math.random());
           this.startTokenTimer();
-          return user;
+          return x;
         })
       );
   }
@@ -40,9 +61,10 @@ export class AuthService {
       .pipe(
         finalize(() => {
           this.clearLocalStorage();
-          this.stopTokenTimer();
+          localStorage.setItem('logout-event', 'logout' + Math.random());
           this._user.next(null);
-          this.router.navigate(['']);
+          this.stopTokenTimer();
+          this.router.navigate(['login']);
         })
       )
       .subscribe();
@@ -56,20 +78,20 @@ export class AuthService {
     }
 
     return this.http
-      .post<ApplicationUser>(`${this.apiUrl}/refresh-token`, { refreshToken })
+      .post<LoginResult>(`${this.apiUrl}/refresh-token`, { refreshToken })
       .pipe(
-        map((user) => {
-          this._user.next(user);
-          this.setLocalStorage(user);
+        map((x) => {
+          this._user.next({ username: x.username, role: x.role });
+          this.setLocalStorage(x);
           this.startTokenTimer();
-          return user;
+          return x;
         })
       );
   }
 
-  setLocalStorage(user: ApplicationUser) {
-    localStorage.setItem('access_token', user.accessToken);
-    localStorage.setItem('refresh_token', user.refreshToken);
+  setLocalStorage(x: LoginResult) {
+    localStorage.setItem('access_token', x.accessToken);
+    localStorage.setItem('refresh_token', x.refreshToken);
   }
 
   clearLocalStorage() {

angular/src/app/home/home.component.html

@@ -7,11 +7,11 @@ <h4 class="card-header">Hi {{ user.username }},</h4>
     <div class="card-body">
       <div class="m-2">
         <h6>Your access token is</h6>
-        {{ user.accessToken }}
+        {{ accessToken }}
       </div>
       <div class="m-2">
         <h6>Your refresh token is</h6>
-        {{ user.refreshToken }}
+        {{ refreshToken }}
       </div>
     </div>
   </div>

angular/src/app/home/home.component.ts

@@ -7,7 +7,13 @@ import { AuthService } from '../core';
   styleUrls: ['./home.component.css'],
 })
 export class HomeComponent implements OnInit {
+  accessToken = '';
+  refreshToken = '';
+
   constructor(public authService: AuthService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.accessToken = localStorage.getItem('access_token');
+    this.refreshToken = localStorage.getItem('refresh_token');
+  }
 }

angular/src/app/login/login.component.ts

@@ -18,13 +18,17 @@ export class LoginComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService
-  ) {
-    if (this.authService.currentUser) {
-      this.router.navigate(['']);
-    }
-  }
+  ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.authService.user$.subscribe((x) => {
+      const accessToken = localStorage.getItem('access_token');
+      const refreshToken = localStorage.getItem('refresh_token');
+      if (x && accessToken && refreshToken) {
+        this.router.navigate(['']);
+      }
+    });
+  }
 
   login() {
     if (!this.username || !this.password) {