用户在Ionic 4中登录后无法立即显示注销按钮 [英] Not able to show the logout button immediately after the user login in Ionic 4

问题描述

我正在Ionic 4应用程序中工作，并已完成登录/注册系统.

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.

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

在这种情况下，成功登录后，我将存储用户ID，该用户将重定向到tab2页面.

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

当用户未登录并尝试访问tab2页面时，它将重定向到注册页面.

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

这是我的 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文件中，我具有登录和注销按钮的逻辑.

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.

这是我的 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.

非常感谢您的帮助.

推荐答案

创建用户服务:

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发出新值.在应用程序组件中订阅可观察的UserService#isLoggedIn$，并使用 async管道基于可观察的刷新视图a>.

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.

编辑:用于根据UserService#isLoggedIn$登录用户时显示注销"按钮的模板.

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>

这篇关于用户在Ionic 4中登录后无法立即显示注销按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！