15.15 Adding a Reactive Logout System

Author: webdevtut

src/app/app.component.ts

@@ -1,27 +1,44 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AuthService } from './auth/auth.service';
 import { Router } from '@angular/router';
 
 import { SplashScreen } from '@capacitor/splash-screen';
 import { Platform } from '@ionic/angular'
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
+  private authSub: Subscription;
+  private prevAuthState = false;
   constructor(private auth: AuthService, private router: Router, private platform: Platform) {
     this.initializeApp()
   }
-
+  
+  
+  ngOnInit() {
+    this.authSub = this.auth.userIsAuthenticated.subscribe(isAuth => {
+      if(!isAuth && this.prevAuthState !== isAuth){
+        this.router.navigateByUrl('auth');
+      }
+      this.prevAuthState = isAuth;
+    })
+  }
+  
+  ngOnDestroy() {
+    if(this.authSub) {
+      this.authSub.unsubscribe();
+    }
+  }
   initializeApp () {
     this.platform.ready().then(async () => {
      await SplashScreen.hide();
     })
   }
   onLogout(){
     this.auth.logout();
-    this.router.navigateByUrl('/auth');
   }
 }

src/app/auth-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { AuthPage } from './auth.page';
+import { AuthPage } from './auth/auth.page';
 
 const routes: Routes = [
   {

src/app/auth/auth.page.ts

@@ -60,6 +60,7 @@ export class AuthPage implements OnInit {
     const password = form.value.password;
 
     this.authenticate(email, password);
+    form.reset()
   }
 
   private showAlert(message: string) {

src/app/auth/auth.service.ts

@@ -98,6 +98,7 @@ export class AuthService {
 
   logout() {
     this._user.next(null);
+    Preferences.remove({key: 'authData'});
   }
 
   private setUserData(userData: AuthResponseData) {

src/app/bookings/booking.service.ts

@@ -96,6 +96,7 @@ export class BookingService {
 
   fetchBookings() {
     return this.auth.userId.pipe(
+      take(1),
       switchMap((userId) => {
         if (!userId) {
           throw new Error('User not found!');

src/app/places/discover/place-detail/place-detail.page.ts

@@ -4,7 +4,7 @@ import { ActionSheetController, AlertController, LoadingController, ModalControl
 import { CreateBookingComponent } from '../../../bookings/create-booking/create-booking.component';
 import { Place } from '../../place.model';
 import { PlacesService } from '../../places.service';
-import { Subscription, switchMap } from 'rxjs';
+import { Subscription, switchMap, take } from 'rxjs';
 import { BookingService } from '../../../bookings/booking.service';
 import { AuthService } from '../../../auth/auth.service';
 
@@ -39,7 +39,9 @@ export class PlaceDetailPage implements OnInit, OnDestroy {
         return;
       }
       let fetchedUserId: string;
-      this.auth.userId.pipe(switchMap(userId => {
+      this.auth.userId.pipe(
+        take(1),
+        switchMap(userId => {
         if(!userId) {
           throw new Error('Found no user!');
         }