时间戳

首页 > 解决方案 > Angular 中的不记名令牌

javascript - Angular 中的不记名令牌

问题描述

我正在构建使用 OAuth 授权的 Web 应用程序。要访问数据，我需要向端点询问令牌并将其放在授权标头中。

我已经在 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;
  }

但由于异步调用，我无法访问方法之外的令牌数据

标签： javascriptangularoauthpromisejwt

解决方案

我仍然试图找到解决方案。现在我结束了

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

推荐阅读