Angular AuthGuard报错：Observable<true|undefined>无法赋值给Observable<boolean>

问题原因 #

你的map操作符仅在user存在时返回true，当user不存在时没有明确返回值，导致Observable的类型被推断为Observable<true | undefined>，而CanActivate接口要求返回Observable<boolean>类型，因此出现类型不匹配错误。

修正方案 #

确保map操作符的所有分支都返回布尔值，同时在用户未登录时添加路由跳转和提示逻辑：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { map, Observable } from 'rxjs';
import { AccountsService } from 'src/Services/Accounts.service';

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

  constructor(private accountsService: AccountsService, private toastr: ToastrService, private router: Router) {}

  canActivate(): Observable<boolean> {
    return this.accountsService.currentUser$.pipe(
      map((user) => {
        if (user) {
          return true;
        }
        this.toastr.error('请先登录');
        this.router.navigate(['/login']);
        return false; // 明确返回布尔值，修正类型不匹配问题
      })
    );
  }
}

补充说明 #

• 修改后Observable的类型会被正确推断为Observable<boolean>，完全符合CanActivate的类型要求。
• 新增的提示和跳转逻辑能在用户未登录时引导其进入登录流程，优化交互体验。

内容的提问来源于stack exchange，提问作者asjad