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

Question

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

更新到 rxjs 7 后，我的异步令牌处理程序现在面临两个问题：

.toPromise() 已弃用
异步令牌处理程序可能 returns 未定义（类型 '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();
  }
}

你能告诉我如何重写异步令牌处理程序吗？

Answer 1

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

toPromise 的类型信息错误。

当源 Observable 完成但从未发出任何值时 - 它以未定义的方式解析。在那种情况下它应该拒绝，但它没有。在这种情况下，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));
}

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

Angular 12/rxjs 7/angularfire: async token interceptor with deprecated toPromise

rxjs

firebase

angularfire

angular

rxjs6