时间戳

首页 > 解决方案 > Angular Firebase 身份验证服务不起作用

angular - Angular Firebase 身份验证服务不起作用

问题描述

我正在尝试在 Angular 中创建身份验证服务，以提供连接到 Google Firebase 的登录表单。问题是，一旦我将服务包含在我的 Logincomponent 的构造函数中，我什至无法再到达 /login 路由。

我在控制台内没有收到任何错误。

有人知道问题出在哪里吗？

认证服务：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from './user.model'

@Injectable({
  providedIn: 'root'
})
export class TestService {
  user$: Observable<User>;

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    )
  }

  async googleSignin() {
    const provider = new auth.GoogleAuthProvider();
    const credential = await this.afAuth.signInWithPopup(provider);
    return this.updateUserData(credential.user);
  }

  async signOut() {
    await this.afAuth.signOut()
    return this.router.navigate(['/'])
  }

  private updateUserData({ uid, email, displayName }: User) {
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${uid}`);

    const data = {
      uid,
      email,
      displayName
    }

    return userRef.set(data, { merge: true })
  }
}

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { Inject } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  signupForm: FormGroup;

  constructor(public fb: FormBuilder, public auth: AuthService) { }

  ngOnInit(): void {

    this.signupForm = this.fb.group({
      'email': ['', [
        Validators.required,
        Validators.email
      ]],
      'password': ['', [
        Validators.pattern('/^([a-zA-Z0-9@$*#]{8,})$/'),
        Validators.minLength(8),
      ]]
    });

  }

  get email() { return this.signupForm.get('email') }
  get password() { return this.signupForm.get('password') }

  signup() {
    // return this.auth.emailSignUp(this.email.value, this.password.value)
  }

}

标签： angulartypescriptfirebaserxjsfirebase-authentication

解决方案

该服务名为TestServicenot AuthService。

我会说你可能从其他地方导入了一些 AuthService 你有编译问题吗？

推荐阅读