Жетон на предъявителя в Angular

Question

Я создаю веб-приложение, использующее авторизацию OAuth.Чтобы получить доступ к данным, мне нужно попросить конечную точку для токена и поместить ее в заголовок авторизации.

Я сделал перехватчик в 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 => 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 и телом