导入storage
app.module.ts文件
import { IonicStorageModule } from '@ionic/storage';
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
其余文件
import { Storage } from '@ionic/storage';
解释含义
- 存储功能,把f[‘userId’]存到UserId中
this.storage.set('UserId', f['userId']);
- 登录进度隐藏
loading.dismiss();
- 自身modal隐藏
this.viewCtrl.dismiss()
- 创建新页面
showModal(){
//创建要modal的页面
let modal = this.modalCtrl.create(LoginPage);
modal.present(); // 把页面modal出来
}
- 判断是否已经登陆过
ionViewDidEnter(){ //生命周期,当页面进入时加载
this.loadUserPage();
}
loadUserPage(){
this.storage.get('UserId').then((val) => { //保存的UserId是否有值
if(val!=null){
this.notLogin = false;
this.logined = true;
} else{
this.notLogin = true;
this.logined = false;
}
})
}
有关生命周期的判断
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';
/**
* Generated class for the MorePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-more',
templateUrl: 'more.html',
})
export class MorePage {
public notLogin : boolean = true;
public logined : boolean = false;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public modalCtrl: ModalController,
public storage: Storage) {
}
showModal(){
//创建要modal的页面
let modal = this.modalCtrl.create(LoginPage);
modal.present(); // 把页面modal出来
}
ionViewDidEnter(){
this.loadUserPage();
}
loadUserPage(){
this.storage.get('UserId').then((val) => {
if(val!=null){
this.notLogin = false;
this.logined = true;
} else{
this.notLogin = true;
this.logined = false;
}
})
}
}
对于不同的登录结果有不同的展现方式
<!--
Generated template for the MorePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title content page>更多</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div *ngIf = "notLogin">
<ion-card>
<ion-card-header text-center>
登录飞行船,体验更多功能
</ion-card-header>
<ion-card-content text-center>
<button ion-button outline small (click)="showModal()">登录/注册</button>
</ion-card-content>
</ion-card>
</div>
<div *ngIf= "logined"></div>
</ion-content>