Ionic2使用提供商内部的Ionic Storage

时间:2017-05-24 06:00:37

标签: javascript angular typescript ionic2

我试图为使用JWT的Node应用程序实现auth提供程序

我收到错误

  

TypeError:无法读取未定义

的属性'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

中使用了文档

我的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

1 个答案:

答案 0 :(得分:2)

更改

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未提及您的组件