用戶在Ionic 4中登錄后無法立即顯示注銷按鈕

Question

我在我的Ionic 4應用程序中工作，我已經建立了登錄/注冊系統。

當用戶登錄后，用戶將能夠訪問該頁面，當用戶未登錄並嘗試訪問該頁面時，它將重定向到登錄頁面。

這是我的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();
}

在此ts中，成功登錄后，我將存儲用戶ID，用戶將重定向到tab2頁面。

當用戶沒有登錄並嘗試訪問tab2頁面時，它將重定向到注冊頁面。

這是我的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>

這是我的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']);
    });
  }
}

在這個ts文件中，我有登錄和注銷按鈕的邏輯。

但問題是，我無法在用戶登錄后立即刷出退出按鈕。

這是我的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 {}

請有人建議，這是顯示登錄和注銷按鈕的好方法。

問題是，我無法在用戶登錄后立即顯示注銷按鈕。

我知道為此我必須創建一個服務。 那么，任何人都可以幫我解決這些問題。

任何幫助深表感謝。

Answer 1

您可以嘗試將頁眉保留在頁面級別，因此請從app.component.html中刪除它，並將其放在user.login.html中。 通常，在頁面級別維護標題和登錄/注銷按鈕，如果你將它們保存在app.component.ts和app.component.ts中的邏輯，你可能需要一個服務或使用事件

<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 2

另一種方法是，當您從存儲中獲取數據時，顯示注銷按鈕會變灰。 用戶體驗將是絕對舒適和可預測的。

Answer 3

創建用戶服務：

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);
  }
}

用戶在登錄頁面登錄后，使用方法UserService#logIn為UserService#isLoggedIn發出新值。 在app組件中訂閱可觀察的UserService#isLoggedIn$ ，並使用async管道基於observable刷新視圖。

編輯：用戶登錄時基於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>