Angular 拦截器调度 Action 以改变状态并在 next.handle 之前等待此更改

Question

这是我的设置...
我将我的 JWT token 保存在 NgRx 商店中。 Action & Effect 工作正常，可以使用我的 token 更新商店。现在需要通过拦截器将此 token 注入(inject)我的 header 中。目标是在第一次 API 调用时，我的 token 将为空，因此我需要调度操作以获取该 token 并将其注入(inject)“当前”API 调用中。问题是我找不到将商店中数据更新绑定(bind)到正在进行的请求的方法。实际结果是此更新是在 next.handle 发生之后到达的，并且 API 调用发生而没有注入(inject)。这是我的代码:

@Injectable()
export class AuthTokenService implements HttpInterceptor {
  myReq: HttpRequest<any>;

  constructor(
    private headerService: HeaderService,
    private store: Store<TokenState>
  ) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Don't intercept the getting of initial token
    if (req.url !== environment.urlNewToken) {
      // Check if we need a NEW Jwt token
      this.store.select(selectJwt).subscribe((data) => {
        if (data === '') {
          // Dispatch "action" so "effect" will update store with new token
          this.store.dispatch({ type: TokenActions.TokenAction.LoadKeyRing });
        }
      });

      this.store
        .select(selectKeyring)
        .pipe(
          skipWhile((keyring) => keyring.jwt.length === 0),
          tap((keyring) => console.log(`the jwt value is : ${keyring.jwt}`)),
          map((keyring) => keyring)
        )
        .subscribe((keyring) => {
          this.myReq = req.clone();
          this.myReq = this.headerService.addAuthToken(this.myReq, keyring.jwt);
        });

      return next.handle(this.myReq); // myReq don't have token
    }
    return next.handle(req);
  }
}

我仍然试图围绕 Observable 进行思考，但显然，我需要在现实世界中的更多提示!谢谢你的帮助 :-)
更新 2
本次实现工作:

if (req.url !== environment.urlNewToken) {
  return this.store.select(selectKeyring).pipe(
    // update the token if needed
    tap(
      (keyring) =>
        keyring.jwt === '' &&
        this.store.dispatch({ type: TokenActions.TokenAction.LoadKeyRing })
    ),

    switchMap((keyring) =>
      this.store.select(selectKeyring).pipe(
        // we skip the current value, since it will be the empty one
        (keyring.jwt === '' && skip(1)) || identity
      )
    ),
    take(1),
    switchMap((keyring) =>
      next.handle(this.headerService.addAuthToken(req.clone(), keyring.jwt))
    )
  );
}

关于更新 2，我不得不插入 take(1)运算符(operator)在调用完成后停止可观察对象，否则我会在商店更改状态后立即进入竞争状态。在此之前进行的所有调用都开始“重新出现”，并且应用程序正在无限循环中重新发送这些请求!

Answer 1

我认为这可能是一种方法:

intercept (/* ... */) {
  if (req.url !== environment.urlNewToken) {
    return this.store.select(selectJtw)
      .pipe(
        map(data => data === ''),

        // update the token if needed
        tap(needsData => needsData && this.store.dispatch(/* ... */)),
        
        switchMap(
          needsData => this.store.select(selectKeyring).pipe(
            // if we need to update the token first
            // we skip the current value, since it will be the empty one
            // otherwise, use an `identity` function(also available from rxjs as `identity`)
            needsData && skip(1) || obs$ => obs$
          )
        ),

        switchMap(
          keyring => next.handle(this.headerService.addAuthToken(req.clone(), keyring.jwt))
        )
      )
  }

  return next.handle(req);
}

如果您想了解更多有关拦截器如何工作的信息，我建议您查看 this article .