HTTP从Firebase获取API的Angular 4 Id_token

Question

Im获得承诺作为firebase auth函数的返回，我需要idToken通过API进行授权。 Im使用Observable设置HTTP get req。我得到一个“401未经授权”，当我运行代码。 我尝试在getData函数外运行getIdToken，尽管idToken在控制台中保持“未定义”状态。

See this image of the console "undefined" message

我怎么解决这个问题呢？

服务：

import { Component, OnInit, Inject, Injectable } from '@angular/core'; 
    import { HttpHeaders, HttpParams } from '@angular/common/http'; 
    import { HttpModule, Http, Response, RequestOptions } from "@angular/http"; 
    import * as firebase from 'firebase/app'; //Firebase SDK 
    import { Observable } from "rxjs/Observable"; 
    import 'rxjs/Rx'; 
    import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database"; 
    import { Params } from "@angular/router/src"; 
    import { Headers } from '@angular/http'; 

    @Injectable() 
    export class StoriesService implements OnInit { 

     page: string; 
     feed: string; 
     hits: string; 
     idToken: any; 

     private stories: any; 
     private savedObjects: any; 
     private apiUrl = 'https://dev-api.byrd.news/v1/stories'; 


     constructor(private http: Http) { 
    console.log("Yo! Stories!") 
    } 

    ngOnInit() { } 

    fireAuth() { 
    firebase.auth().currentUser.getIdToken(true).then((idToken) => { 
     this.idToken = idToken; 
    }) 
    } 


    getData(page, feed, hits): Observable<any> { 
    this.fireAuth(); 
    let headers = new Headers(); 
    headers.append('user_token', this.idToken); 
    let params = new HttpParams() 
     .set('page', page) 
     .set('feed', feed) 
     .set('hits', hits) 
    //let options = new RequestOptionsArg({headers: headers, params:params}); 
    console.log(this.idToken, headers, params); 
    return this.http 
     .get(this.apiUrl, { params, headers }) 
     .map((response: Response) => { 
     console.log("Breakthrough!") 
     return response.json() || {}; 
     }) 
     .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
    return Observable.throw(error.statusText); 
    } 

组件：

getStories() : void { 
    this.storiesService.getData('0', 'latest','6') 
    .subscribe(data => { 
     console.log(data); 
    }) 
    } 
} 

Answer 1

这在某种程度上与.flatMap工作（）函数：

export class StoriesService implements OnInit { 

    private apiUrl = 'https://dev-api.byrd.news/v1/stories'; 

    constructor(private http: Http) { 
    console.log("Yo! Stories!") 
    } 

    ngOnInit() { } 

    getToken() { 
    return Observable.fromPromise(firebase.auth().currentUser.getIdToken(true) 
     .then((idToken) => { 
     return idToken; 
     })) 
    } 


    getData(page: string, feed: string, hits: string): Observable<any> { 
    return this.getToken() 
     .flatMap(idToken => { 
     let headers = new Headers(); 
     headers.append('user_token', idToken); 
     let params = new URLSearchParams(); 
      params.append('page', page); 
      params.append('feed', feed); 
      params.append('hits', hits); 
     let options = new RequestOptions({ headers: headers, params: params }); 
     // console.log(this.idToken, options); 
     console.log("Token: " + idToken); 
     console.log(headers, params); 
     return this.http 
      .get(this.apiUrl, { params, headers }) 
      .map((response: Response) => { 
      console.log("Breakthrough!") 
      return response.json() || {}; 
      }) 
     }) 
     .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
    return Observable.throw(error.statusText); 
    }