Angular中的不記名令牌

Question

我正在構建使用OAuth授權的網絡應用。 為了訪問數據，我需要向端點詢問令牌並將其放置在Authorization標頭中。

我已經在Angular中創建了攔截器，該攔截器為API調用設置了正確的標題，並且該部分工作正常。

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if(!(req.headers.get("Content-Type") === "application/x-www-form-urlencoded")) {

      const authReq = req.clone({
        headers: req.headers.set('Authorazation', 'Bearer ' + this.callToken()
          .then(resp => resp)
          .catch(err => console.log(err)))
      });
      return next.handle(authReq)
    }else {
      return next.handle(req);
    }
  }

但是我有這種方法callToken（），其中我使用了promis來調用令牌。 現在，此方法返回promise，我無法將其放在正確類型的標題中，它總是像

      callToken(): Promise<any> {
    let url = 'url';
    let body = "body";
    let promise = fetch(url, {
      body: body,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
    });

    return promise
      .then(resp => resp.json())
      .then(json => json.access_token);

  }

有趣的是，當我說resp => console.log（resp.acces_token）令牌時，它很漂亮。

我也嘗試使用回調

      callForToken(): string {
    let url = 'url';
    let body = 'body';

    let option = {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
    };
    let token;
    this.http.post<Token>(url, body, option).subscribe(
      res => {
        token = res.access_token;
      }
    );
    return token;
  }

但是由於異步調用，我無法在方法之外訪問令牌數據

Answer 1

我仍然嘗試為此找到解決方案。 現在我結束了

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!(req.headers.get('Content-Type') === 'application/x-www-form-urlencoded')) {
      return Observable.fromPromise(this.handleAccess(req, next));
    }
  }


  private async handleAccess(req: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {
    const token = await this.callToken();
    console.log(token);

    let changeRequest;

    if (token) {
      changeRequest = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + token)
      });
    }

    return next.handle(changeRequest).toPromise();
  }

  callToken(): Promise<Token> {
    let url = 'url';
    let body = 'body';


    return fetch(url, {
      body: body,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
    }).then(resp => resp.json())
      .then(json => json.acces_token)
      .catch(err => console.error(err));


  }

但仍然沒有定義令牌

編輯：實際上就是這樣。 我搞砸了URL和正文