如何使用 Ionic 2 重新加载页面

Posted 2023-02-23

【中文标题】如何使用 Ionic 2 重新加载页面

【英文标题】：How can I reload page using Ionic 2

【发布时间】：2017-09-05 05:18:05

【问题描述】：

大家好，我在 Ionic 2 上的登录表单有问题。 当我这样做时，登录令牌保存在存储中并重定向到另一个页面，但由于令牌不可用，用户的数据未显示在 android 或 ios 上。我发现我需要重新加载页面，在本地环境“location.reload()”工作完美，用户数据可用，但当我在 Google Play 和 App Store 上发布时不起作用。

我尝试了一些方法来重新加载它，但在 Android 和 IOS 上不起作用。我能做什么？

登录功能

loginForm()
const data = 
  "username" : this.login.value.username,
  "email" : this.login.value.username,
  "password" : this.login.value.password,

this.dataService.loginUser(data).subscribe(
    (data) => 
      let token = data.key;
      this.dataService.checkAccessUserGroup(token).subscribe(
        (data) => 
          if(data[0] == 200)
            this.storage.set('access_token', token);
            //this.appCtrl.getRootNav().setRoot(HomePage);
            //this.navCtrl.setRoot(HomePage);
            //this.appCtrl.getRootNav().setRoot(this.navCtrl.getActive().component);
            //this.navCtrl.push(HomePage);
            //this.appCtrl.getRootNav().push(IndexPage);
            //location.reload()
            this.navCtrl.setRoot(HomePage).then(() =>
              this.navCtrl.popToRoot();
            );

          
          if(data[0] == 500)
            this.generateAlert("Error",'No tienes permisos adecuados para acceder. Ponte en contacto con el administrador de tu Deck.');
          
        ,
        (err) => 
          if(err.status == 400)
            this.generateAlert("Error",'No hemos podido verificar tus datos. Intentalo de nuevo');
          
        
      );
    ,
    (err) => 
      if(err.status == 400)
        this.generateAlert("Error",'Usuario o constraseña no válido. Intentalo de nuevo');
      
    
  );

登录html

<ion-content padding id="container-home" style="background-image:url('assets/img/bg-login.png')">

  <ion-row>
    <ion-img class="logo-md"   src="assets/img/mydecklogocolor.png"></ion-img>
  </ion-row>

  <ion-row id="auth-login">
    <ion-col col-12 no-padding>
      <ion-row class="header">
        <h3>Ingresa</h3>
      </ion-row>
      <form id="login-container" [formGroup]="login" (ngSubmit)="loginForm()">
      <ion-row>
          <ion-item>
            <ion-input type="text" formControlName="username"
                       class="input-md"placeholder="Correo electrónico / usuario"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="password" formControlName="password"
                       class="input-md" placeholder="Contraseña"></ion-input>
          </ion-item>
      </ion-row>
      <ion-row>
        <button ion-button class="auth-btn" type="submit" [disabled]="!login.valid">Ingresar</button>
      </ion-row>
      </form>
      <ion-row>
        <a href="">¿Olvidaste tu contraseña?</a>
      </ion-row>
    </ion-col>
  </ion-row>

</ion-content>

【问题讨论】：

你的意思是this.storage.set('access_token', token);没有及时设置？这是哪个存储？

这就是离子存储ionicframework.com/docs/storage

【参考方案1】：

在 Ionic Storage 的情况下，它会为 set 和 get 函数返回一个 promise。所以它们是异步的。

所以你可以试试：

 this.storage.set('access_token', token).then(()=>

      this.navCtrl.setRoot(HomePage);
);

您不需要“刷新页面”。保存令牌后，您只需将主页设置为 root。