在 Ionic 4 中设置存储后，我的 Ionic App 持续加载

Question

我在我的 Ionic 4 应用程序中工作，我正在存储中设置用户 ID 以显示登录和注销按钮。

这是我的userlogin.page.ts:

this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
    if (data) {
        this.responseEdit = data;
        if (this.responseEdit.status === 'success') {
          this.storage.set('ID', this.responseEdit.data.id);
          this.chakapi.setUserID(this.responseEdit.data.id);
          this.presentAlertConfirm('Login Successful', 1);
        } else {
          this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
        }
    }
});

在这个ts文件中，我正在设置存储。

这是app.component.html:

<ion-title color="myheadtitle" *ngIf="!chakapi.isLoggednIn()" slot="end">Register/Login</ion-title>
<ion-title color="myheadtitle" *ngIf="chakapi.isLoggednIn()" slot="end" (click)="logoutClicked()">Logout</ion-title>

在这个 html 中，我有两个按钮，用于登录和注销。

这是我的服务：chakapiservice:

setUserID($token) {
  this.storage.set('ID', $token);
}
getUserID() {
  return this.storage.get('ID');
}
isLoggednIn() {
  return this.getUserID() !== null;
}

这是我的app.component.ts:

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

我不知道为什么在应用此代码后，我的应用程序一直在加载。可能是因为 return this.storage.get('ID');.

非常感谢任何帮助。

Answer 1

Storage.get 是异步的试试这个

this.storage.get('ID').then((val) => {
   return val !== null ? true : false
  });

和

isLoggednIn() { 
return this.getUserID();
 }

其余代码对我来说看起来不错:) 确保您已完成此处描述的所有设置：https://ionicframework.com/docs/building/storage

Answer 2

在您的模板中试试这个：

<ion-title color="myheadtitle" *ngIf="!chakapi.getUserID() | async" slot="end">Register/Login</ion-title>
<ion-title color="myheadtitle" *ngIf="chakapi.getUserID() | async" slot="end" (click)="logoutClicked()">Logout</ion-title>

如果this.storage.get('ID'); returns Promise 这应该有效。而且您不必检查返回值是否为 null，因为 null 实际上是 false。

编辑：另外为什么要设置两次 ID？

this.storage.set('ID', this.responseEdit.data.id);
this.chakapi.setUserID(this.responseEdit.data.id);

你可以摆脱其中之一。

EDIT2：最终你可以扩展你的chakapiservice来使用主题来存储用户是否登录：

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

@Injectable({
  providedIn: 'root'
})
export class ChakApiService {
  // Add behavior subject.
  private isLoggedIn = new BehaviorSubject<boolean>(this.getCredentials() !== null);
  public isLoggedIn$ = this.isLoggedIn.asObservable();

  constructor() { }

  setUserID($token) {
    this.storage.set('ID', $token);
    localStorage.setItem('token', $token);
    this.isLoggedIn.next(true);
  }

  getCredentials(): string {
    return localStorage.getItem('token');
  }

  // Rest of the code omitted for brevity.
}

然后在app.component.html中使用：

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

您还应该将 localStorage.clear() 添加到 logoutClicked() 方法中，以从 localStorage.

中删除 token

在 Ionic 4 中设置存储后，我的 Ionic App 持续加载

My Ionic App is continuously loading after setting the storage in Ionic 4

ionic-framework

angular

ionic4