angular - CanActivate 的行为与 Angular 7 与 firebase 的行为不符

Question

在我的Authservice，我有：

  getAuthenticationState(): Observable<any> {
    return this.angularFireAuth.authState;
  }

在我的Guard：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
        // In case of refresh
        return this.authService.getAuthenticationState()
        .pipe(map(user => !!user))
        .pipe(tap(loggedIn => {
            console.log(loggedIn);
            if (!loggedIn) {
                this.router.navigate(['/admin/login']);
            } else {
                return true;
            }
        }));
    }

我的问题是我必须单击登录按钮两次（我确定它已按应有的方式实现），看来 Guard 没有作为 Observable 工作，loggedIn值只打印一次。

标签： angulartypescriptfirebase-authenticationangularfire2angular7

Answer 1

添加 take(1) 来解决它以及为什么使用 2 个管道，将其更改为

 return this.authService.getAuthenticationState()
    .take(1)
    .pipe(
         map(user => !!user),
         tap(loggedIn => {
            console.log(loggedIn);
           if (!loggedIn) {
              this.router.navigate(['/admin/login']);
           } else {
              return true;
           }
         })
      );