错误错误：未捕获（承诺）：类型错误：无法读取 null 的属性“isAdmin”

Question

我正在制作一个 admin-auth-guard 服务，它根据用户是否是管理员来阻止或允许用户。虽然代码编译正确并且使用 ng-serve 命令没有错误。但是，当我单击任何管理员可访问的链接时，我在浏览器控制台中出现错误，如下所示。

---

错误信息

core.js:4442 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'isAdmin' of null
TypeError: Cannot read property 'isAdmin' of null
at MapSubscriber.project (admin-auth-guard.service.ts:21)

---

admin-auth-guard.service.ts

    import { Observable } from 'rxjs'; 
    import { UserService } from './user.service';
    import { AutheService } from './authe.service';
    import { Injectable } from '@angular/core';
    import { CanActivate } from '@angular/router';
    import { map, switchMap } from 'rxjs/operators';

@Injectable({
 providedIn: 'root'
})

export class AdminAuthGuard implements CanActivate {

 constructor(private authe: AutheService,private userService: UserService ) { }

 canActivate(): Observable<boolean> {
  return this.authe.user$
  .pipe(switchMap(user => this.userService.get(user.uid).valueChanges()))
  .pipe(map(appUser => appUser.isAdmin)) //this line has error
 }
}

---

user.service.ts

import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Injectable } from '@angular/core';`enter code here`
import firebase from 'firebase/app'; 
import { AppUser } from '../models/app-user';

@Injectable({
providedIn: 'root'
})

export class UserService {

 constructor(private db: AngularFireDatabase) { }
  save(user: firebase.User) {this.db.object('/user/' + user.uid).update({        
  name : user.displayName,
  email: user.email
  });
 } 
 get(uid: string): AngularFireObject<AppUser> {
  return this.db.object('/users/' + uid);
 }
}

---

app-user.ts

export interface AppUser {
 name: string;
 email: string;
 isAdmin: boolean;
}

Answer 1

错误意味着它找不到appUser。所以它的结果是 isAdmin 的 undefined。

要处理错误，将行更改为

    import { Observable } from 'rxjs'; 
    import { UserService } from './user.service';
    import { AutheService } from './authe.service';
    import { Injectable } from '@angular/core';
    import { CanActivate } from '@angular/router';
    import { map, switchMap } from 'rxjs/operators';

@Injectable({
 providedIn: 'root'
})

export class AdminAuthGuard implements CanActivate {

 constructor(private authe: AutheService,private userService: UserService ) { }

 canActivate(): Observable<boolean> {
  return this.authe.user$
  .pipe(switchMap(user => this.userService.get(user.uid).valueChanges()))
  .pipe(map(appUser => appUser && appUser.isAdmin || null))
 }
}

为了避免错误并在 appUser.isAdmin else null 或 false（如果需要）时返回正确的值。

注释中的代码

canActivate(): Observable<boolean> { 
  return this.authe.user$ .pipe(
    switchMap(user => this.userService.get(user.uid).valueChanges()), 
    startWith(''), 
    map(appUser => appUser && appUser.isAdmin || null));
}