Ionic2 mit Ionic Lagerung innerhalb Provider

Question

Ich habe versucht Auth-Provider für Knoten-Anwendung zu implementieren, die JWT verwendet

Ich erhalte Fehler

TypeError: Cannot read property 'set' of undefined

Meine app.module.ts wie folgt aussehen.

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 { } 

Ich benutzte Dokumentation in https://github.com/driftyco/ionic-storage/tree/v2.0.1#configuring-storage-new-in-117

Mein 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 || {}; 
    } 
} 

Meine Plattform Details sind

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

ändern

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

zu

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

oder

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

Ihre this ist beziehe nicht zu Ihrer Komponente