Angular Firebase用户身份验证错误类型错误

问题描述

我正在学习一门有关如何使用Firebase和angular设计身份验证的课程。一切正常，直到我在名为getCurrentUser（）的函数中遇到此错误。

这是错误消息

（错误TS2345：类型'OperatorFunction '的参数不可分配 类型'OperatorFunction 。 键入“用户| “ null”不可分配给“ User”类型。 类型'null'不能分配给类型'用户'。）

您知道如何解决此问题

import { Injectable } from '@angular/core'
import { AngularFireAuth } from '@angular/fire/auth'
import { User as FirebaseUser } from 'firebase'
import { Observable,Subject } from 'rxjs'
import { map } from 'rxjs/operators'

import { IUser,User } from '../user/user'
import { Role } from './auth.enum'
import {
  AuthService,IAuthStatus,IServerAuthResponse,defaultAuthStatus,} from './auth.service'

interface IJwtToken {
  email: string
  iat: number
  exp: number
  sub: string
}
@Injectable()
export class FirebaseAuthService extends AuthService {
  constructor(private afAuth: AngularFireAuth) {
    super()
  }
  protected authProvider(
    email: string,password: string
  ): Observable<IServerAuthResponse> {
    const serverResponse$ = new Subject<IServerAuthResponse>()
    this.afAuth.signInWithEmailAndPassword(email,password).then(
      (res) => {
        const firebaseUser: FirebaseUser | null = res.user
        firebaseUser?.getIdToken().then(
          (token) => serverResponse$.next({ accessToken: token } as IServerAuthResponse),(err) => serverResponse$.error(err)
        )
      },(err) => serverResponse$.error(err)
    )
    return serverResponse$
  }
  protected transformJwtToken(token: IJwtToken): IAuthStatus {
    if (!token) {
      return defaultAuthStatus
    }
    return {
      isAuthenticated: token.email ? true : false,userId: token.sub,userRole: Role.None,}
  }
  protected getCurrentUser(): Observable<User> {
    return this.afAuth.user.pipe(map(this.transformFirebaseUser))
  }
  private transformFirebaseUser(firebaseUser: FirebaseUser): User {
    if (!firebaseUser) {
      return new User()
    }
    return User.Build({
      name: {
        first: firebaseUser?.displayName?.split(' ')[0] || 'Firebase',last: firebaseUser?.displayName?.split(' ')[1] || 'User',},picture: firebaseUser.photoURL,email: firebaseUser.email,_id: firebaseUser.uid,role: Role.None,} as IUser)
  }
  // tslint:disable-next-line: typedef
  logout() {
    if (this.afAuth) {
      this.afAuth.signOut()
    }
    this.clearToken()
    this.authStatus$.next(defaultAuthStatus)
  }
}

强文本

解决方法

请导入这两个：

1. 从“firebase/app”导入 firebase
2. 导入'firebase/auth'

然后将私有的 transformFirebaseUser(firebaseUser: FirebaseUser): User 改为私有的 transformFirebaseUser(firebaseUser: firebase.User): User 和 const firebaseUser: FirebaseUser | null = res.user 到 const firebaseUser: firebaseUser.User | null = res.user。这些改动是基于作者自己给出的源代码，本书与源代码略有不同[这里]：https://github.com/duluca/lemon-mart/

但还有一个变化是私有的 transformFirebaseUser(firebaseUser: firebase.User | null): User。

在我的理解中， getCurrentUser() 使用 transformFirebaseUser 创建一个 User 对象，它仅在单击登录后调用，transformFirebaseUser 函数有一个带 firebaseUser.User 的参数，但它可能为空。如果您使用的是 Visual Studio Code，请将鼠标悬停在 this.afAuth.user 上，然后您可以看到 Observable 类型为 ，使用 firebase.User 作为参数时，transformFireBaseUser 需要匹配。