我正在构建一个需要用户登录才能访问内容的 ionic 应用程序，目前我遇到了一个问题：应用程序退出太容易了。
目前，只要用户从 rootPage 按下返回，应用程序就会立即退出。打开登录页面后，将再次显示并擦除所有会话数据。
所以我现在有两个问题：
首先，ionic 是如何检测到用户试图从 rootPage 离开并退出应用的？我希望能够显示一个提示，询问用户是否确实想在这种情况发生时离开。我尝试在调用 ionViewCanLeave() 时显示提示，但后来我意识到即使我使用 NavCtrl 从我的根页面推送另一个页面，它也会被调用。
其次，即使应用程序在手机上退出，我如何保存用户配置文件和会话数据？这样当用户下次打开应用程序时，如果他们没有从上一个会话中注销，他们就会立即登录。
【问题讨论】：
这里的东西很少：
保留用户数据（例如 JWT 等身份验证令牌）是您应该在“登录”周期中执行的操作。只需使用Ionic Storage 作为解决方案。您可以通过谷歌搜索的许多指南中描述了您实现它的方式。示例：https://www.joshmorony.com/hybrid-app-developers-dont-store-your-users-passwords/ 但实施细节取决于您拥有的身份验证服务/方法。
对于注销，在用户选择注销后将其带到“登录”页面通常是一种很好的做法。如果他们想在大多数现代平台上真正关闭应用程序，则不必通过从 navstack 中删除 rootPage 来实现（就像现代 iOS 通过点击主页关闭应用程序然后向上滑动，Android 有自己的方法）。 所以注销的实现可能如下：
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，您可以使用您尝试利用“承诺”的导航守卫来探索选项：
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();
});
更新：因此，如果您只是“转到另一个页面”（推入新页面），上述代码也会触发，因此要使其按照您想要的方式工作，您可以执行以下操作：
如果用户单击注销按钮，则指向注销方法 - (click) = "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();
});
【讨论】：
最后，我将这段代码注入到我的应用模块中以实现我想要的
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();
}
【讨论】：