Angular Служба аутентификации Firebase не работает - PullRequest
Новая
       21

Angular Служба аутентификации Firebase не работает

0 голосов
/ 29 апреля 2020

Я пытаюсь создать службу аутентификации в Angular, чтобы предоставить форму входа в систему, которая подключается к Google Firebase. Проблема в том, что как только я включаю сервис в конструктор моего компонента Login, я уже не могу достичь маршрута / login.

Я не получаю никаких ошибок внутри консоли.

Кто-нибудь знает, где проблема?

AuthService: 

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 })
  }
}

login.component.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)
  }

}

1 Ответ

1 голос
/ 30 апреля 2020

Служба называется TestService, а не AuthService.

Я бы сказал, что вы, вероятно, импортировали какой-либо AuthService из другого места, у вас есть проблемы с компиляцией?

...