时间戳

首页 > 解决方案 > 如何从 Observable 中检索数据并在 Interceptor 中使用它？

javascript - 如何从 Observable 中检索数据并在 Interceptor 中使用它？

问题描述

我正在构建应用程序的前端Angular 8。此应用程序使用OAuth 2实现来管理身份验证（密码授予），因此任何HTTP请求（对令牌端点的请求除外）都需要在其标头上具有有效的 access_token。

为了提供所述令牌，我制作了一个Angular interceptor从另一个服务检索令牌，然后将其附加到截获的HTTP请求。令牌检索方法不直接给出令牌，而是最终解析为有效令牌的可观察对象，我做出此选择是因为访问令牌可能不会立即可用，如果令牌过期，应用程序需要通过HTTP调用刷新它然后可以将刷新的令牌传递给HTTP拦截器。

我遇到的问题是，尽管我进行了多次尝试，但拦截器并没有等待检索令牌，所以最后拦截器被跳过并且HTTP请求是在没有附加任何令牌的情况下发出的。

这是我的拦截器的代码，retrieveValidToken是Observable返回令牌的代码。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { FacadeService } from './facade.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {

  constructor(private facadeService: FacadeService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.includes('localhost:3000') && !req.url.endsWith('token')) {
      this.facadeService.retrieveValidToken()
        .subscribe(
          (res) => {
            const clone = req.clone({ setHeaders: { Authorization: `Bearer ${res}` } });
            return next.handle(clone);
          },
          (err) => {
            const clone = req.clone({ setHeaders: { Authorization: `Bearer ` } });
            return next.handle(clone);
          }
        );
    } else {
    return next.handle(req);
    }
  }
}

标签： javascriptangulartypescriptrxjs

解决方案

Observables 是异步的。subscribe 方法外面的代码不会等待里面的代码。

您应该自行返回 observable，而不仅仅是在其订阅中返回结果：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.includes('localhost:3000') && !req.url.endsWith('token')) {
      return this.facadeService.retrieveValidToken()
        .subscribe(
          res => {
            const clone = req.clone({ setHeaders: { Authorization: `Bearer ${res}` } });
            return next.handle(clone);
          }
        );
    } else {
    return next.handle(req);
    }
  }

相似的东西：

如何将异步服务用于角度 httpClient 拦截器

推荐阅读