angular - HTTP 使用 firebase Id_token 从 API 获取 Angular 4

Question

我从 firebase auth 函数返回一个 promise ，我需要 idToken 通过 API 授权。

我正在使用 Observable 设置 HTTP 获取请求。

当我运行代码时，我得到了“401 Unauthorized”。我尝试在 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);
  }