带Firebase身份验证的拦截器 [英] Interceptor with firebase authentication

问题描述

我的6角拦截器有问题。我已经将代码从ANGLE 5.x迁移到了6.0。和rxjs 5.x至6.x。当我尝试创建新的用户帐户时，该请求似乎被调用了两次。我之所以知道这一点，是因为我将错误记录到了控制台。我注意到，当我尝试从Firebase身份验证中获取ID令牌时，会得到此重复项，请参阅下面的代码片段。

intercept (request: HttpRequest<any>, next: HttpHandler): observable<HttpEvent<any>> {
return this.auth.getIdToken().pipe(
    mergeMap((token: any) => {
      if (token) {
        request = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
      }

      return next.handle(request).pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {

          }
        }, (err: any) => {
          if (err instanceof HttpErrorResponse) {
            if ((err.status === 401) || (err.status === 403)) {
             this.router.navigate([WellknownRoutesConstants.SIGN_IN], { queryParams: { returnUrl: this.router.routerState.snapshot.url }});
            }
          }
        })
    );

  }));

}

getIdToken (): Observable<any> {
  return ngFireAuth.authState.pipe(
    tap((user) => {
      if (user) {
        return observableOf(user.getIdToken());
      } else {
        return observableOf;
      }
    }),
    catchError(observableOf)
  );
}

推荐答案

格兰特的回答是好的，但有一个问题。

如果用户注销，auth.idToken可观测对象将发出一个值，因为令牌值更改为null。请求对象保持不变(但仍已初始化)，因此重复该HTTP请求。

我使用take(1)只获取auth.idToken可观察对象发出的第一个值。我也改为switchMap(参见take)：

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

   return this.auth.idToken.pipe(
      take(1), // <-------------- Only emit the first value!

      switchMap((token: any) => {
        if (token) {
          request = request.clone({
            setHeaders: { Authorization: `Bearer ${token}` }
          });
        }
        return next.handle(request);
      })

    );
}

这篇关于带Firebase身份验证的拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！