Angular在HTTP调用之前异步获取授权令牌

时间:2017-12-18 16:48:07

标签: angular http rxjs rxjs5 switchmap

在发布之前我去了许多其他类似的问题而无法找到解决方案。比如Angular 2 - Inject authorization token before each Http request

我正在使用AWS会话,它为我提供了用于发出HTTP请求的授权令牌。现在获取会话可以是异步操作,具体取决于刷新令牌的需要。

问题: 我无法链接获取会话然后进行HTTP调用。

版本 Angular 5,RxJs 5.5.2

AuthService的获取会话功能。

    getSession(): Observable<any> {
        const sessionOb = new Subject<CognitoUserSession>();
        // AysnFn4session is a callback implementation
        AysnFn4session((err, session) => { 
                console.log('Found Session');
                sessionOb.next(session);
                sessionOb.complete();
            });
        return sessionOb;
    }

API服务的获取功能 - 路径1

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this._authService.getSession().switchMap((session) => {
      console.log('dasdasd');
      let token = '';
      if (session) {
        token = session.getIdToken().getJwtToken();
        options = options || {};
        options.headers = options.headers || new Headers();
        options.headers.append('Authorization', token);
      }
      return this._http.get(url, options);
    });
  }

API服务的获取功能 - 第2步

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this._authService.getSession().pipe(mergeMap((session) => {
  console.log('So what??');
  let token = '';
  if (session) {
    token = session.getIdToken().getJwtToken();
    options = options || {};
    options.headers = options.headers || new Headers();
    options.headers.append('Authorization', token);
  }
  return this._http.get(url, options);
}));
}

这是我如何称呼这个api。

getItemInfo(item) {
return this._apiHttp.get('/assets/data/item.json')
  .map(res => {
    console.log(res);
    return res.json();
  })
  .subscribe(data => console.log(data),
     err => console.log(err), 
     () => console.log('done'));
}

现在问题出现在控制台刚刚打印的情况下,而不是正在进行http调用。

Found Session
done

我无法理解我在使用switchmap的mergermap时出错,以便完成http请求。

1 个答案:

答案 0 :(得分:1)

错误在于getSession()。您的AsynFn4session回调在受试者的观察者正在收听之前完成。 (主题的观察者只接收订阅后发出的值)。这意味着观察者从未接收到主体发射,因此可观察序列不会继续。我会使用一个可观察的而不是一个主题

getSession(): Observable<any> {
    return new Observable(observer => {
        AsynFn4session((err, session) => {
            observer.next(session);
            observer.complete();
        });
    });
}