用户登录 Ionic 4 后无法立即显示注销按钮

Question

我正在使用我的 Ionic 4 应用程序，我已经制作了 login/register 系统。

当用户登录后，用户将能够访问该页面，当用户未登录并尝试访问该页面时，它将被重定向到登录页面。

这是我的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。通常，在页面级别维护页眉和 login/logout 按钮，如果您将它们保留在 app.component 中并将逻辑保留在 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

另一种方式，在您从存储中获取数据时将注销按钮显示为灰色。对于 UX 来说绝对舒适且可预测。

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 的新值。在应用组件中订阅 observable UserService#isLoggedIn$，并使用 async pipe.

刷新基于 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>

用户登录 Ionic 4 后无法立即显示注销按钮

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

ionic-framework

angular

ionic4