Ionic2 在提供程序中使用 Ionic Storage

Question

我试图为使用 JWT 的节点应用程序实现身份验证提供程序

我收到错误

类型错误： 无法读取未定义的属性"set">

我的app.module.ts如下所示。

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule } from '@angular/http';
import { Auth } from '../providers/auth/auth';
import { Storage } from '@ionic/storage';
export function provideStorage() {
 return new Storage( { name: '__mydb' } /* optional config */);
}
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    // IonicStorageModule.forRoot({
    //   name: '__mercury',
    //   driverOrder: ['indexeddb', 'websql']
    // })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LoginPage,
    { provide: Storage, useFactory: provideStorage },
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    Auth
  ]
})
export class AppModule { }

我在 https://github.com/driftyco/ionic-storage/tree/v2.0.1#configuring-storage-new-in-117 中使用了文档

My auth.provider.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs';
import { Storage } from '@ionic/storage';
/*
  Generated class for the AuthProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Auth {
  baseUrl: string = "http//localhost:9080/"
  constructor(public http: Http, public storage: Storage) {
    console.log('Hello AuthProvider Provider');
  }
  createAuthorizationHeader(headers: Headers) {
    let token;
    this.storage.get('token').then(data => token = data);
    headers.append('Athorization', token);
  }
  login(data) {
    return this.http.post('//localhost:9080/auth', data)
      .map(this.extractData);
  }
  isLogged() {
    this.storage.get('token').then(data => {
      if (data)
        return true;
      else
        return false;
    }).catch(err => {
      return false;
    });
    return false;
  }
  logout() {
    this.storage.remove('token');
    return true;
  }
  private extractData(res: Response) {
    console.log(res);
    let body = res.json();
    if (body.success === true) {
        this.storage.set("token", body.token);

    };
    return body || {};
  }
}

我的平台详细信息是

Ionic Framework: 3.2.1
Ionic Native: ^3.5.0
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.10.3
OS Platform: macOS Sierra
Navigator Platform: MacIntel
Ionic Storage : ^2.0.1

Answer 1

更改

login(data) {
    return this.http.post('//localhost:9080/auth', data)
      .map(this.extractData);
 }

自

login(data) {
    return this.http.post('//localhost:9080/auth', data)
      .map(this.extractData.bind(this));
 }

或

login(data) {
    return this.http.post('//localhost:9080/auth', data)
      .map((data)=>this.extractData(data));
 }

您的this未引用您的组件