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

【问题标题】：Angular 12/rxjs 7/angularfire: async token interceptor with deprecated toPromiseAngular 12/rxjs 7/angularfire：不推荐使用 toPromise 的异步令牌拦截器
【发布时间】：2021-11-17 04:18:58
【问题描述】：

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

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

.toPromise() 已废弃
异步 tokenHandler 可能返回 undefined（类型 'HttpEvent | undefined' 不可分配给类型 'HttpEvent'）

@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 吗？

【问题讨论】：

我已经有一段时间没有使用 Promise 了。没有任何参数的.then() 是无操作（什么都不做）还是总是返回undefined？以前从未见过这个成语。

标签： angular firebase rxjs angularfire rxjs6

【解决方案1】：

stream$.toPromise() 在语义上与新的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));
}

【讨论】：