类型 'Observable<true | undefined>' 不可分配给类型 'Observable<boolean>'

Question

我正在尝试为用户创建一个授权系统。我正在使用 Angular11。我对 Angular 绝对是新手。我还在代码中返回一个布尔类型。但我仍然发现了一个错误。

下面是我的代码：-

auth.guard.ts
（这是主要问题）

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AccountService } from '../_services/account.service';

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

  constructor(private accountService : AccountService, private toastr : ToastrService){}
  canActivate(): Observable<boolean> {
    return this.accountService.currentUser$.pipe(
      map(user => {
        if(user) return true;
        this.toastr.error(error);
      })
    )
  }
  
}

帐户.服务.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models/user';

@Injectable({
  providedIn: 'root'
})
export class AccountService {

  baseUrl='https://localhost:5001/api/';
  private currentUserSource =new ReplaySubject<User> (1);
  currentUser$=this.currentUserSource.asObservable();

  

  constructor(private http :HttpClient) { }

  login(model:any)
  {
    return this.http.post<User>(this.baseUrl+'account/login',model).pipe(

      map((response:User)=>{

        const user=response;
        if(user){
          localStorage.setItem('user',JSON.stringify(user));
          this.currentUserSource.next(user);
        }
      })
    )
  }

  register(model:any)
  {
    return this.http.post<User>(this.baseUrl +'account/register',model).pipe(
      map((user:User)=>{
        if(user){
          localStorage.setItem('user',JSON.stringify(user));
          this.currentUserSource.next(user);
        }
        return user;
        
      })
    )
    
  }



  setCurrentUser(user:User)
  {
    this.currentUserSource.next(user);
  }





  logout()
  {
    localStorage.removeItem('user');  
    
    this.currentUserSource.next(null as any);
  }
}

我的错误是：-

为什么错误我不明白。我如何解决这个问题。请帮忙。

Answer 1

该错误表明 canActivate 方法没有返回 Observable< boolean > 而是返回 Obserable<true | 未定义>

因此，让我们检查您的地图管道以了解为什么会出现这种情况：

map(user => {
        // we only return here so
        // only true is possible to be returned
        if(user) return true;
        // after this line nothing will be returned so the observable can only return true | undefinded
        this.toastr.error(error);
      })

您可以通过确保始终返回这样的布尔值来解决此问题

map(user => {
        if(user) return true;
        this.toastr.error(error);
        // this line bellow is new it changes the return type from true | undefined into boolean
        return false;
      })