Angular保护管理员路由报错：Property 'switchmap'不存在于Observable<User | null>

你的问题源于RxJS版本适配错误、操作符使用方式不当，以及守卫返回值类型不匹配，以下是具体修正步骤和代码：

核心问题点 #

1. RxJS版本差异：Angular 6+配套的RxJS 6+要求所有操作符必须通过pipe()包裹调用，不再支持直接链式调用switchMap、map；且你拼写错误，switchmap需改为首字母大写的switchMap。
2. 导入方式错误：需从rxjs/operators单独导入所需操作符，而非导入整个rxjs/Rx（旧版RxJS写法）。
3. 返回值类型错误：异步逻辑的守卫不能返回boolean，需返回Observable<boolean | UrlTree>这类异步类型。
4. 空值未处理：auth.user$可能返回null，需先判断用户是否存在，避免访问user.uid时报错。

修正后的完整代码 #

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { Observable } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

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

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
    return this.auth.user$.pipe(
      switchMap(user => {
        // 用户未登录直接返回false
        if (!user) {
          return new Observable<boolean>(observer => observer.next(false));
        }
        return this.userService.get(user.uid);
      }),
      // 处理用户信息为空的情况，默认返回非管理员权限
      map(appUser => appUser?.isAdmin ?? false)
    );
  }
}

额外说明 #

• 若userService.get()返回Observable<AppUser | null>，appUser?.isAdmin ?? false可避免空值访问报错；
• 确保AuthService的user$类型为Observable<User | null>且User包含uid字段，UserService的get()方法返回包含isAdmin字段的用户对象Observable。

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