Not able to show the logout button immediately after the user login in Ionic 4

Question

I am working in my Ionic 4 app and I have made the login/register system.

When the user login, after that the user will able to visit the page and when the user is not login and try to visit the page, it will get redirect to the login page.

This is my userlogin.page.ts:

async UserLoginDetails($soctype, $socid) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 1100,
      translucent: true,
    });
    await loading.present();
    const userdetailslogin = {
      email: this.userlogindet.value.email,
      password: this.userlogindet.value.password,
      social_type: $soctype,
      social_id: $socid,
    };
    this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
      // console.log(data);
      if (data) {
        this.responseEdit = data;
        if (this.responseEdit.status === 'success') {
          // console.log(this.responseEdit.data.id);
          this.storage.set('ID', this.responseEdit.data.id);
          this.presentAlertConfirm('Login Successful', 1);
        } else {
          this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
        }
      }
    });
    return await loading.onDidDismiss();
}

async presentAlertConfirm($messge, $para) {
    const alert = await this.alertController.create({
      message: $messge,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            // console.log('Confirm Cancel: blah');
            if ($para === 1) {
              this.modalController.dismiss();
              this.router.navigate(['/tabs/tab2']);
            }
          }
        }]
    });
    await alert.present();
}

In this ts, after the successful login, I am storing the user id and the user will get redirect to the tab2 page.

And when the user is not login and try to visit the tab2 page, it will redirect to the register page.

This is my app.component.html:

<ion-app>
  <ion-header>
    <ion-toolbar color="myheader">
      <ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title>
      <ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="menuclick2">Logout</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

This is my app.component.ts:

import { Component } from '@angular/core';
import { Platform, AlertController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { PopoverController } from '@ionic/angular';
import { PopoverPage } from './popover/popover.page';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  menuclick = true;
  menuclick2 = false;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    public popoverController: PopoverController,
    public alertController: AlertController,
    private storage: Storage,
    private router: Router
  ) {
    this.initializeApp();

    this.storage.get('ID').then((val) => {
      if (val) {
        this.menuclick2 = true;
        this.menuclick = false;
      }
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }


  logoutClicked() {
    this.storage.remove('ID').then(() => {
      this.menuclick2 = false;
      this.menuclick = true;
      this.router.navigate(['/tabs/tab1']);
    });
  }
}

In this ts file, I have the logic for the login and logout button.

But the problem is that, I am not able to shoe the logout button immediately after the user login.

This is my tabs.router.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthenticationGuard } from '../guards/authentication.guard';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        canActivate: [AuthenticationGuard],
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            loadChildren: '../login/login.module#LoginPageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Please anyone suggest that, It is the good way or not for showing the login and logout button.

The problem is that, I am not able to show the logout button immediately after the user login.

I know that for this I have to create a service. So, Can anyone help me with the code.

Any help is much appreciated.

Answer 1

Create a user service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private isLoggedIn = new BehaviorSubject<boolean>(false);

  public isLoggedIn$ = this.isLoggedIn.asObservable();

  constructor() { }

  public logIn() {
    this.isLoggedIn.next(true);
  }

  public logOut() {
    this.isLoggedIn.next(false);
  }
}

After user login in login page emit a new value for UserService#isLoggedIn using method UserService#logIn. Subscribe to observable UserService#isLoggedIn$ in app component, and refresh the view based on observable using async pipe.

EDIT: Template for showing Logout button when user is logged in based on UserService#isLoggedIn$.

<ion-toolbar color="myheader">
  <ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title>
  <ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="userService.isLoggedIn$ | async">Logout</ion-title>
</ion-toolbar>

Answer 2

You could try to keep the header at the page level, so remove this from app.component.html, and put it in your user.login.html. In general, maintain the header and the login/logout buttons at the page level, if you do keep them in app.component and logic in app.component.ts you may need a service or to use events

<ion-header>
    <ion-toolbar color="myheader">
      <ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title>
      <ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="menuclick2">Logout</ion-title>
    </ion-toolbar>
  </ion-header>

Answer 3

Another way, show logout button grayed while you getting data from storage. It would be absolutely comfortable and predictable for UX.