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

我正在Angular 8中构建应用程序的前端。此应用程序使用OAuth 2实现来管理身份验证（密码授予），因此任何HTTP请求（令牌端点的请求除外）都必须在其标头上具有有效的access_token。为了提供上述令牌，我创建了一个Angular interceptor，可以从另一个服务中检索该令牌，然后将其附加到截获的HTTP请求中。令牌检索方法没有直接给出令牌，而是提供了一个可观察的对象，最终将其解析为有效的令牌，我之所以做出此选择，是因为访问令牌可能不会立即可用，如果令牌已过期，则应用程序需要使用调用，然后刷新的令牌可以传递给HTTP拦截器。我遇到的问题是，尽管我做了很多尝试，但拦截器并没有等待令牌被检索，因此最后拦截器被跳过，并且在没有附加任何令牌的情况下发出了HTTP请求。这是我的拦截器的代码，HTTP是返回令牌的retrieveValidToken。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); } }} 最佳答案 可观察的是异步的。订阅方法之外的代码将不等待其中的代码。您应该返回可观察的结果，而不仅仅是返回其订阅中的结果： 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); } }相似的东西：How use async service into angular httpClient interceptor关于javascript - 如何从Observable检索数据并在拦截器中使用它？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58287295/