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="your@email.com" [(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-如何使用Ionic中的本地存储来验证登录页面的电子邮件和密码

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或使用我上面编写的代码的保证（但是对我而言这没有意义）。
如果要使用await来设置登录名和密码，则必须将login函数更改为async。
另外，我认为使用本地存储进行身份验证不是一个好主意，因为用户可以简单地删除应用程序数据。
如果不能使用rest api，则至少要使用静态文件，但是出于安全考虑，我不建议使用该文件。
您可以使用包含所有数据的json文件，然后要做的就是使用httpClient get来获取内容，但是对于离子应用程序则根本不安全。

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

1 个答案: