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和正文