退出离子应用程序时显示提示

2 回答

• 0

  这里的事情很少：

  • Persisting user data （例如JWT等auth令牌）是你应该在"login"循环期间做的事情 . 只需使用Ionic Storage作为解决方案 . 你可以谷歌的许多指南中描述了你实现它的方式 . 示例：https://www.joshmorony.com/hybrid-app-developers-dont-store-your-users-passwords/但实现细节取决于您拥有的auth服务/方法 .

  • For logout 在用户选择退出后将用户带到"login"页面通常是一种很好的做法 . 如果他们想要在大多数现代平台上实际关闭应用程序，就不必通过从navstack中删除你的rootPage来实现（就像现代iOS关闭应用程序，然后点击主页然后向上滑动，Android有自己的方法） . 因此，注销的实现可能如下：

  • 侧栏菜单功能"LOGOUT"按钮

  • 用户按下它，您的注销方法执行必要的操作，例如：

  ---

  logout() {
      this.navCtrl.push('LoginPage');
      this.storage.remove('sessionData');
      this.inventory.clear();
      if (!this.appIsOnDevice && "serviceWorker" in navigator) {
        navigator.serviceWorker.getRegistrations().then(registrations => {
          registrations.forEach(registration => {
            registration.unregister();
          });
        });
      }
      if (this.appIsOnline && this.pushToken !== "") {
        this.revokeFCMToken();
      }
    }
  

  如果您仍然希望采用“提示”类型的方法来离开rootPage，您可以使用您尝试利用“promise”的导航防护来探索选项：

  ionViewCanLeave() {
      return new Promise((resolve, reject) => {
        let alert = this.alertCtrl.create({
          title: 'Log out',
          subTitle: 'Are you sure you want to log out?',
          buttons: [
            {
              text: 'No',
              role: 'cancel',
              handler: () => {
                reject();
              }
            },
            {
              text: 'Yes',
              handler: () => {
                alert.dismiss().then(() => {
                  resolve();
                });
              }
            }
          ]
        });
        alert.present();
      });
  

  更新：所以如果您只是“转到另一个页面”（推入新页面），上面的代码也会触发，所以为了让它按照您想要的方式工作，您可以执行以下操作：

  • 有一个变量来控制用户是否请求注销（简单的布尔值）

  • 如果用户单击注销按钮，指向注销方法 - （单击）=“logout（）”，请确保此方法更新布尔值：

  logout（）{//更改用户注销事件的标志：this.logoutRequested = true; //其余的注销逻辑：}

  • 现在在导航防护方法中，您只需检查此布尔状态即可

  示例

  ionViewCanLeave() {
          // here we add this check - if logout is not requested - the page is free to leave (as in case where you push in new page into view:
          if (!this.logoutRequested) return true;
          // if that condition is not met and logoutRequested is true we proceed with modal via promise, but before that we can already reset flag:
          this.logoutRequested = false;
          return new Promise((resolve, reject) => {
            let alert = this.alertCtrl.create({
              title: 'Log out',
              subTitle: 'Are you sure you want to log out?',
              buttons: [
                {
                  text: 'No',
                  role: 'cancel',
                  handler: () => {
                    reject();
                  }
                },
                {
                  text: 'Yes',
                  handler: () => {
                    alert.dismiss().then(() => {
                      resolve();
                    });
                  }
                }
              ]
            });
            alert.present();
          });
  

  回复于 2024-04-26T07:28:25+08:00
• 0

  最后，我将这段代码注入我的app模块，以实现我想要的

  this.platform.registerBackButtonAction(() => {
      if (this.nav.canGoBack()) {
        this.nav.pop();
      } else {
        this.promptExit();
      }
    })
  
    private promptExit() {
      let alert = this.alertCtrl.create({
        title: 'Exit?',
        message: 'Do you want to exit My App?',
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Exit',
            handler: () => {
              // Insert whatever you need to do before exiting here
              ...
              this.platform.exitApp())
            }
          }
        ]
      });
      alert.present();
    }
  

  回复于 2024-04-26T07:28:25+08:00