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调用令牌。现在这个方法返回的承诺我不能把它放在右侧类型的标题中，它总是显示为

      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 =＆gt; 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和正文

Angular中的持票人令牌

1 个答案: