错误：类型＆＃x27; boolean＆＃x27;无法分配到type＆＃x27;可观察的boolean＆gt;＆＃x27;

Question

我正在处理以下代码：

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
import {Observable} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {map, tap} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ChatGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth,
              private router: Router) {
  }


  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable <boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      
    return this.afAuth.authState
      .pipe(
        map(user => user !== null),
        tap(value => {
          if (!value) {
            this.router.navigateByUrl('/login').then();
            return value;
          } else {
            return value;
          }
        })
      );
  }

}

我拥有的版本是：

Angular CLI：13.1.4

节点：16.14.0

我在代码的这一部分中有此错误：

 return this.afAuth.authState
      .pipe(
        map(user => user !== null),
        tap(value => {
          if (!value) {
            this.router.navigateByUrl('/login').then();
            return value;
          } else {
            return value;
          }
        })

说：说：说：

键入'可观察的＆lt; unknown＆gt;'不能分配给布尔值| urltree |可观察的lt; boolean | urltree＆gt; |承诺＆lt; boolean | urltree＆gt;'。type'可观察的＆lt; unknown＆gt;'不能分配为'可观察的＆lt; boolean | urltree＆gt;'。属性的类型“源”是不兼容的。

你知道我如何解决这个问题吗？

Answer 1

根据 documentation ，Tap Operator是一个函数，它返回可观察到的与源相同的函数，但为每个项目运行指定的观察者或回调”。

这意味着您不必返回点击中的值。默认情况下将完成。

另一方面，您不想在返回布尔值后重定向路线，您需要在此之前进行。

因此，我建议您将代码更改为此：

    return this.afAuth.authState
              .pipe(
                map(user => { 
                   const isLogged = !!user;
                   if(!isLogged){
                      this.router.navigateByUrl('/login')
                      return false;
                   } else {
                      return true
                   }
                })
);

另外，可能会在页面刷新（F5），this.afauth.authstate首先发射a null值正确的情况在用户对象之前。
这将为您拒绝，而用户已记录。
在这种情况下，我建议您添加a debouncetime 在地图之前的操作员。

Answer 2

类型“Observable”不可分配给类型
'可观察<布尔值| UrlTree>

您的返回类型是可观察的，而在方法签名中您将返回类型定义为 Observable

一个可能的解决方案是检查 this.afAuth.authState 返回的内容并更新其签名以返回 Observable