Question

我有一个“入职”页面，应该由用户填充一次，然后在数据库中将“ passedOnboarding”标志设置为“ true”。

提交表单后，它应将用户重定向到其仪表板页面。

“仪表板”页面位于护栏后面，以确保用户填写了入职表格，如果没有，则将其重定向到那里。

我有一个accountDetails$可观察到的东西，看起来像这样：

refreshAccountDetails$ = new BehaviorSubject <void> (null);

accountDetails$ = this.refreshAccountDetails$.pipe(
    distinctUntilChanged(),
    switchMap(() => this.getAccountDetails()),
    shareReplay());

refreshAccountDetails$ behaviorSubject是流的源，以便在需要时允许从服务器刷新accountDetails $。

这是入职提交功能：

submitForm() {
    this.userService.accountDetails$.pipe(take(1)).subscribe(accountDetails => {
      const submitModel = ... 
      this.userService.onboarding(submitModel)
        .subscribe(() => {
          this.router.navigateByUrl(dashboard_path);
        });
    });
  }

以下是入职功能，您可以在提交表单后看到以下内容，我尝试触发accountDetails$的刷新，这样警卫才能“看到”更新的详细信息，并允许导航到“仪表盘”：

onboarding(request: OnboardingRequest): Observable<ClientDetailsResponse> {
    return this.http.postTyped<ClientDetailsResponse>(this.ONBOARDING_ENDPOINT, request).pipe(
      tap(() => {
        this.refreshAccountDetails$.next(null);
      })
    );
  }

我在仪表板上设置的守卫是：

export class OnboardingRequiredGuard implements CanActivate {
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.userService.accountDetails$.pipe(
          map(accountDetails => {
            if (!accountDetails.isOnboardingFilled) {
              return this.router.parseUrl(_OnboardingPath_);
            }
            return true;
          })
        );
      }
    }

问题是守卫“看到”了未设置标志的旧值，因此它重定向回了入职页面。

我不确定accountDetail$的可观察性及其来源是否设置正确，或者是否存在其他错误。

谢谢！

Angular RxJS-Guard在服务中看不到Observable的更新值

0 个答案: