Ionic 2のHTTPリクエストでローカルストレージのトークンを使用

Question

My Ionic 2アプリにログインがあり、認証トークンがローカルストレージに保存されます。次に、このトークンをHTTPリクエストで使用したいと思います。私の認証サービスで

私は次の方法があります。

export class Rides { 

    token: string; 

    constructor(public http: Http, public authentification: Authentification) { 
     this.authentification.authToken().then((val) => { 
      this.token = val; 
      console.log(this.token); 
     }); 
    } 

    getOpenRides() { 
     var headers = new Headers(); 
     headers.append('Authorization', 'Token token=' + this.token); 
     return this.http.get('URL', { headers: headers }) 
     .map(res => res.json()); 
    } 

} 

それは私の乗り物サービスで正しいトークンをログに記録します。私が持っているHTTP要求を行い、私のサービスで

authToken() { 
     return this.storage.get('auth_token').then((val) => { 
     return val; 
     }); 
    } 

そしてをコンストラクタ。しかし、HTTPリクエストでトークンを使用すると、私のサーバーはtoken = undefinedが送信されたことを示します。

どうすればいいですか？

これは私がgetOpenRidesを呼び出すと、私は結果を表示したい場所をページコンポーネントです：

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Rides } from '../../providers/rides'; 

/* 
    Generated class for the Agenda page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-agenda', 
    templateUrl: 'agenda.html', 
    providers: [Rides] 
}) 
export class AgendaPage { 

    openRides: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public rides: Rides) {} 

    ionViewDidLoad() { 
    this.openRides = this.rides.getOpenRides() 
    .subscribe(response => { console.log(response.rides) }); 
    } 

}

Answer 1

問題は、あなたのコンポーネントにプロバイダをマーキングしているという事実であるべきです、これは、各コンポーネントがインスタンス化されるときに、トークンが定義されていない新しいクリーンなサービスインスタンスを使用していることを意味します。

プロバイダーをコンポーネントではなくNgModuleに配置すると、サービスがそのモジュールのすべてのコンポーネントで同じであることを意味します。したがって、AgendaPage - コンポーネントがインスタンス化されると、トークンを設定していたサービスと同じサービスを持ちます。

だからあなたのコンポーネント（すべて）からプロバイダを削除します。

@Component({ 
    selector: 'page-agenda', 
    templateUrl: 'agenda.html', 
    // providers: [Rides] // remove! 
}) 

し、代わりにあなたのNgModuleに宣言：

@NgModule({ 
    imports: [...], 
    declarations: [...], 
    providers: [ Rides, .... ], // add this! 
    bootstrap: [ ... ] 
}) 

は、この情報がお役に立てば幸い！ :)