Ionic4 - 如何使用离子中的本地存储来验证登录页面的电子邮件和密码

Question

我正在尝试验证登录凭据，但无法使用ionic4中的本地存储进行验证

当我尝试验证登录页面时，我遇到了使用本地存储的Ionic4的问题

ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage{
    ngForm: FormGroup;
    email:string;
    password:string;

 constructor(private storage: Storage) {

 }


  login()
  {   
    this.storage.set('email', 'simmy@gmail');
  this.storage.set('password','sim23');
   this.storage.get('email').then((val) => {
 console.log('Your email id is', val);
});
 this.storage.get('password').then((val) => {
 console.log('Your password is', val);
});

  }

}

HTML代码

<ion-header>
  <ion-toolbar>
    <ion-title>login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="primary" padding> 
<form #form="ngForm">
 <ion-grid> <ion-row color="primary" justify-content-center>
 <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
 <div text-center>
 <h3>Login</h3> 
 </div> 
 <div padding> 
 <ion-item> 
 <ion-input name="email" type="email" placeholder="[email protected]" [(ngModel)]="email"></ion-input> 
 </ion-item>
 <ion-item> 
 <ion-input name="password" type="password" placeholder="Password" [(ngModel)]="password"></ion-input> 
 </ion-item> 
 </div> 
 <div padding> 
 <ion-button size="large" type="submit" (click)="login()" expand="block">Login</ion-button> 
 </div> 
 </ion-col> 
 </ion-row> 
 </ion-grid> 
 </form> 
</ion-content>

Ionic4 - 如何使用离子中的本地存储来验证登录页面的电子邮件和密码

Answer 1

为了工作，你应该使用它

  login() {
    this.storage.set('email', 'simmy@gmail').then(() => {
      this.storage.set('password', 'sim23').then(() => {
        this.storage.get('email').then((val) => {
          console.log('Your email id is', val);
        });
        this.storage.get('password').then((val) => {
          console.log('Your password is', val);
        });
      });
    });
  }

注意：this.storage.get/set是你必须使用的承诺或使用我上面写的代码（但它对我没有意义）。 如果你想使用await来设置登录名和密码，你必须将login函数更改为async。 此外，我认为使用本地存储进行身份验证是一个坏主意，因为用户可以简单地删除应用程序数据。 如果不能使用rest api，至少使用静态文件但是我不推荐它，因为安全措施。 您可以使用包含所有数据的json文件，然后您需要做的就是使用httpClient get获取内容，但对于离子应用程序根本不受保护。