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가 전송되었다고 말합니다.

어떻게해야합니까? ,

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

이 문제는 당신이 당신의 구성 요소에 제공 마킹되어 있다는 사실에 거짓말을해야합니다

이 내가 getOpenRides를 호출하고 난 결과를 표시 할 위치 페이지의 구성 요소입니다 이는 각 구성 요소가 인스턴스화 될 때 토큰이 정의되지 않은 서비스의 새로운 깨끗한 인스턴스를 사용함을 의미합니다.

구성 요소 대신 NgModule에 공급자를 넣으면 해당 모듈의 모든 구성 요소에 대해 서비스가 동일하다는 것을 의미합니다. 따라서 AgendaPage - 구성 요소가 인스턴스화 될 때 토큰을 설정하는 것과 동일한 서비스를 갖게됩니다. 대신 NgModule에

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

을 선포 :

그래서 (모두) 컴포넌트에서 공급자를 제거하려면이 도움이

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

희망을! :)