ionic3学习之记住密码登录

ionic3学习之记住密码登录

准备工作：

先看下，重点看下存储数据在 storage 中 ionic3学习之登录页

登录的逻辑处理

我们需要将用户登录是否记住密码记录下来

图示：

login.ts

_login(username: HTMLInputElement, password: HTMLInputElement){

    if (username.value.length === 0){
      this.showToast("bottom", "请输入");
      return false;
    }

    if (password.value.length === 0){
      this.showToast("bottom", "请输入密码");
      return false;
    }

    // 记录用户是否记住密码
    let data = {username: username.value, password: password.value, isRemember: this.isRemember};

    // 储存用户信息
    this.settings.setValue("USER_INFO", JSON.stringify(data));

    // 界面跳转
    let modal = this.modalCtrl.create(TabsPage, data);
    modal.present();
}

修改程序逻辑

我们需要理解的就是，在进入界面的时候，判断缓存中是否有记录是否记住密码，根据这个来判断进入哪个界面

进入 src/app/ 下，修改 app.component.ts

// 引入对应 storage 的文件包
import {Storage} from '@ionic/storage';

// 在 constructor 构造方法中增加逻辑
storage.ready().then(() => {
   storage.get('USER_INFO').then(
     (value: string) => {
       let isRemember = !!value ? JSON.parse(value).isRemember : false;
       if ( isRemember ) {
         this.rootPage = TabsPage;
       } else {
         this.rootPage = LoginPage;
       }
     }
   );
 });

说明

关于 storage 的小知识

import {Storage} from "@ionic/storage";
constructor(public storage: Storage) {
}

我们使用的是 ionic 的 storage，而不是浏览器自带的 storage。
官方文档上面有一句话：

When running in a native app context, Storage will prioritize using SQLite, as it's one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.

在本地应用程序环境中运行时，存储将优先使用SQLite，因为它是最稳定和广泛使用的基于文件的数据库之一，并且避免了诸如localstorage和IndexedDB之类的一些陷阱，例如操作系统决定清除这种数据在低磁盘空间的情况下。

文档连接：https://ionicframework.com/do...

附

完整的代码如下：

import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {Storage} from '@ionic/storage';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
import {LoginPage} from "../pages/login/login";
import {TabsPage} from "../pages/tabs/tabs";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any;

  constructor(platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              storage: Storage,) {

    /* 当storage准备就绪之后，判断 USER_INFO 中是否记录登录状态 */
    storage.ready().then(() => {
      storage.get('USER_INFO').then(
        (value: string) => {
          let isRemember = !!value ? JSON.parse(value).isRemember : false;
          if ( isRemember ) {
            this.rootPage = TabsPage;
          } else {
            this.rootPage = LoginPage;
          }
        }
      );
    });

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}