离子4本机存储-错误存储项目对象代码: 5，源：“本机”，异常:空，堆栈：

Question

我有这个离子4项目(使用REST )，也安装了离子本机存储。关于这个项目，我可能有多个问题，但第一个问题是:我希望存储登录数据，以便能够将一个令牌传递给将用于其他端点的标头。但是，如果我运行这个应用程序并尝试登录，我会得到以下错误：

错误存储项对象{代码: 5，源：“原生”，异常: null，堆栈："“}

我的登录功能是这样的：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { ApiService } from './api.service';
import { User } from '../models/user';
import { NativeStorage } from '@ionic-native/native-storage/ngx';



@Injectable({
  providedIn: 'root'
})
export class AuthService {

  isLoggedIn = false;
  token: any;


  constructor(
    private http: HttpClient,
    private api: ApiService,
    private storage: NativeStorage
  ) { }


  login(account_number: Number, password: String) {
    return this.http.post(this.api.API_URL + '/login',
      {account_number: account_number, password: password}
    ).pipe(
      tap(token => {
        this.storage.setItem('token', token)
        .then(
          () => {
            console.log('Token Stored', token);
          },
          error => console.error('Error storing item', error)
        );
        this.token = token;
        this.isLoggedIn = true;
        return token;
      }),
    );
  }


  register(name: String, email: String, phone: Number, reference: String, account_number: String, password: String) {
    return this.http.post(this.api.API_URL + '/register',
      { name: name, email: email, phone: phone, reference: reference, account_number: account_number, password: password }
    )
  }
  logout() {
    const headers = new HttpHeaders({
      'Authorization': "auth-token" + this.token
    });
    return this.http.get(this.api.API_URL + '/logout', { headers: headers })
      .pipe(
        tap(data => {
          this.storage.remove("token");
          this.isLoggedIn = false;
          delete this.token;
          return data;
        })
      )
  }

  getToken() {
    return this.storage.getItem('token').then(
      data => {
        this.token = data;
        if (this.token != null) {
          this.isLoggedIn = true;
        } else {
          this.isLoggedIn = false;
        }
      },
      error => {
        this.token = null;
        this.isLoggedIn = false;
      }
    );
  }
}

这是我的login.ts。

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { AlertService } from 'src/app/services/alert.service';
import { RegisterPage } from '../register/register.page';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  userdata: any;


  constructor(
    private modalC: ModalController,
    private authService: AuthService,
    private navCtrl: NavController,
    private alertService: AlertService,
   // private router: Router
  ) { }

  ngOnInit() {
  }

    // Dismiss Login Modal
    dismissLogin() {
      this.modalC.dismiss();
    }
    // On Register button tap, dismiss login modal and open register modal
    async registerModal() {
      this.dismissLogin();
      const registerModal = await this.modalC.create({
        component: RegisterPage
      });
      return await registerModal.present();
    }
    login(form: NgForm) {
      this.authService.login(form.value.account_number, form.value.password).subscribe(
        data => {
          this.userdata = data;

          this.alertService.presentToast("Logged In");
          console.log('this is loggin in userdata', data, "and this is the stored auth-token", this.userdata.message);
        },
        error => {
          console.log(error, "logged in");
        },
        () => {
          this.dismissLogin();
          this.navCtrl.navigateRoot('/dashboard');
          console.log('this is this.userdata', )
        }
      );
    }

}

这是我的app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy,  } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';


@NgModule({
  declarations: [
    AppComponent,],
  entryComponents: [

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

您可以简单地使用javascript本地存储，也可以使用Ionic本机存储实现您的目的。

主要使用的是localStorage.set()。以防万一只想存储字符串。

你也使用离子本机存储对象和许多东西。

https://ionicframework.com/docs/native/native-storage