具有 Firebase 身份验证的拦截器

Posted 2023-03-13

【中文标题】具有 Firebase 身份验证的拦截器

【英文标题】：Interceptor with firebase authentication

【发布时间】：2018-12-05 19:31:13

【问题描述】：

我的 Angular 6 拦截器有问题。我已将代码从 Angular 5.x 迁移到 6.0。和 rxjs 5.x 到 6.x。当我尝试创建一个新的用户帐户时，该请求似乎被调用了两次。我知道这一点，因为我将错误记录到控制台。我注意到当我尝试从 firebase auth 获取 Id 令牌时，我得到了这种重复，请参见下面的代码 sn-p。

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)
  );

【问题讨论】：

我也遇到了同样的问题....你找到答案了吗？

我还没有解决办法。

【参考方案1】：

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

如果用户注销，auth.idToken Observable 会发出一个值，因为令牌值更改为null。请求对象保持不变（但仍处于初始化状态），因此重复 HTTP 请求。

我使用take(1) 仅获取auth.idToken Observable 发出的第一个值。我也改成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);
      )

    );

【讨论】：

无法编辑 - 因为“编辑队列已满”。代码不会以现有形式编译。您需要将take(1), 之后的, 更改为;

@pokkie 谢谢。它不需要;，但你是对的，它是不正确的。 take 应该在 switchMap 之外

这一定是答案！

在 Angular 11.1.2 和 @angular/fire 6.1.4 中仍然像魅力一样工作。

【参考方案2】：

自从升级到 Angular 6 / RxJS 6 后，这对我有用。这是我的拦截器：

import  Injectable  from '@angular/core';
import  AngularFireAuth  from '@angular/fire/auth';
import 
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
 from '@angular/common/http';
import  Observable  from 'rxjs';
import  mergeMap  from 'rxjs/operators';

@Injectable()

export class TokenInterceptor implements HttpInterceptor 

  constructor(
    private auth: AngularFireAuth
  ) 
    console.log('token interceptor constructor');
  

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    return this.auth.idToken.pipe(
      mergeMap((token: any) => 
        console.log(token);
        if (token) 
          request = request.clone( setHeaders:  Authorization: `Bearer $token`  );
        

        return next.handle(request);

    ));