Angular 和 Firebase 的问题:身份验证和用户

时间:2021-01-03 17:18:50

标签: angular typescript firebase

我正在使用 Firebase 在 Angular 中做一个项目。在 auth.service.ts 文件中导入 auth 和 User 时,Visual Studio Code 无法识别它们。

import { auth } from 'firebase/app';
import { User } from 'firebase';

import { AngularFireAuth } from '@angular/fire/auth'

@Injectable()
export class AuthService {
  public user:User;

  constructor(public afAuth: AngularFireAuth) { }

  async login( email:string, password:string){}
  register(){}
  logout(){}
  getCurrentUser(){}

}

我有以下问题:

从“firebase/app”导入 { auth };

从'firebase'导入{用户};

请帮忙。

我有这个错误: 这:'auth' 已声明,但它的值永远不会被读取。ts(6133) 模块 '"../../../../node_modules/firebase"' 没有导出成员 'auth'。您的意思是使用“从“../../../../node_modules/firebase”导入身份验证吗?ts(2614)。 ——

这:导入用户模块'"../../../../node_modules/firebase"'没有导出成员'用户'。您的意思是使用“从“../../../../node_modules/firebase”导入用户吗?ts(2614) –

1 个答案:

答案 0 :(得分:1)

AngularFireAuth 是一个包装类,因此您不需要 auth。由于错误指出 firebase 包没有名为 Userauth 的导出成员。您可以查看有关如何使用 AngularFireAuth 的文档:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}