如何在ionic应用程序中管理用户登录屏幕

Question

如何在按下应用程序图标时检查该用户是该应用程序的新用户。并且如果该用户为该用户新显示板载屏幕。

Answer 1

在应用程序初始化时，您可以检查用户是否已完成登录。您可以使用本地存储/离子存储进行检查。我建议在app.component.ts中进行检查。

示例：

app.component.ts

export class AppComponent {
constructor(
...
private router: Router,
private storageService: StorageService,
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.splashScreen.hide();

// Method to send user to onboarding pages
this.pushToAppOnboarding();
});
}

async pushToAppOnboarding() {
await this.storageService.getItem('onboarding').then((key) => {
// StorageService only takes strings. Thus, compare if the string equals 'true'.
if (key.value !== 'true') { 
this.router.navigate(['/onboarding']);
}
});
}
}

入职.page.html

<ion-content>
<!-- place your onboarding content here. Use e.g. ion-slider -->
<ion-button (click)="finishAppOnboarding()">Lets Start</ion-button>
</ion-content>

入职.页面.ts

constructor(
private router: Router,
private storageService: StorageService,
) { } 
finishAppOnboarding() {
this.storageService.setItem('onboarding', 'true');
this.router.navigate(['/route-to-your-homepage']);
}

Answer 2

您可以使用本地存储来检查应用程序是否是第一次打开的，并相应地显示入职模式或页面：

import { Storage } from '@ionic/storage';
constructor(private storage: Storage) { }
this.storage.get('firstOpening').then((firstOpening) => {
if (!firstOpening) {
//Open onboarding modal or navigate to page
}
});

在离开入职页面之前，您可以在本地存储中设置值，这样页面就不会再次显示：

this.storage.set("firstOpening", true);