时间戳

首页 > 解决方案 > Angular 12/rxjs 7/angularfire：不推荐使用 toPromise 的异步令牌拦截器

angular - Angular 12/rxjs 7/angularfire：不推荐使用 toPromise 的异步令牌拦截器

问题描述

我正在使用 angularfire 和身份验证拦截器，为每个请求添加一个令牌。此拦截器需要异步调用，因为令牌可能需要刷新。

随着 rxjs 7 的更新，我的 async tokenHandler 现在面临两个问题：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const fireUser = this.auth.fireAuthUser.value;

    if (fireUser) {
      // convert promise to observable using 'from' operator
      return from(this.tokenHandler(request, next, fireUser));
    }

    return next.handle(request);
  }

  async tokenHandler(request: HttpRequest<any>, next: HttpHandler, currentUser: firebase.User): Promise<HttpEvent<any>> {
    const authToken = await currentUser.getIdToken().then();

    if (authToken) {
      request = request.clone({ setHeaders: { Authorization: 'Bearer ' + authToken } });
    }

    return next.handle(request).toPromise();
  }
}

你能告诉我如何重写异步 tokenHandler 吗？

标签： angularfirebaserxjsangularfirerxjs6

解决方案

stream$.toPromise()在语义上与 new 最相似，lastValueFrom(stream$)除了：

toPromise 的类型信息错误。

当源 Observable 完成而没有发出单个值时 - 它以 undefined 解析。在这种情况下它应该拒绝，但事实并非如此。在这种情况下，lastValueFrom 和 firstValueFrom 都将被拒绝。

因此，您可以使用lastValueFrom或解决此问题firstValueFrom。

async tokenHandler(
  request: HttpRequest<any>, 
  next: HttpHandler, 
  currentUser: firebase.User
): Promise<HttpEvent<any>> {
  const authToken = await currentUser.getIdToken();

  if (authToken) {
    request = request.clone({ setHeaders: { Authorization: 'Bearer ' + authToken } });
  }

  return lastValueFrom(next.handle(request));
}

推荐阅读