Firebase Auth : 错误：发生网络错误（例如超时、连接中断或主机无法访问）答案

【问题标题】：Firebase Auth : Error: A network error (such as timeout, interrupted connection or unreachable host) has occurredFirebase Auth : 错误：发生网络错误（例如超时、连接中断或主机无法访问）
【发布时间】：2020-04-13 19:14:42
【问题描述】：

我正在进行身份验证，该项目工作正常并连接到 Firebase 中的数据库，因为当我需要从中检索数据时，该项目有部分，当我尝试使用正确的电子邮件和密码登录时，我得到了当前错误：

错误：发生网络错误（如超时、连接中断或主机无法访问）。

登录管理服务：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from "@angular/fire/auth";
import *  as fireBase from 'firebase';
@Injectable({
  providedIn: 'root'
})
export class LoginAdminserviceService {
  isAuth: boolean;

  constructor(private  angularFireAuth: AngularFireAuth,loginDatabase: AngularFireDatabase) {

   }

   async login(email: string, password: string) {
      return new Promise(
          (resolve,reject)=>{
            fireBase.auth().signInWithEmailAndPassword(email,password).then(
              ()=>{
                this.isAuth = true;
                resolve();
              },
              (error)=>{
                this.isAuth = false;
                reject(error);
              }
            )
          }
      )
  }
  async logout() {
    return await this.angularFireAuth.auth.signOut();
  }

  isUserLoggedIn() {
    return JSON.parse(localStorage.getItem('user'));
  }

}

身份验证组件：

import { Component, OnInit } from '@angular/core';
import { LoginAdminserviceService } from '../services/login-adminservice.service';
import { Route, Router } from '@angular/router';

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

  constructor(private  route:Router , public loginServiceasAdmin : LoginAdminserviceService) { }

  ngOnInit() {
  }
  async loginAdmin(email:string,password:string){
    this.loginServiceasAdmin.login(email,password).then(
      ()=>{
        alert('Bienvenue '+email);
        this.route.navigate(['/listreclamation']);
      },
      (error)=>{
        console.log('Pas de connexion '+error);
        alert('Votre compte est incorrect');
      });
  }
}

html页面：

<form>

    Email:<input type="text" #email><br>
    Password:<input type="password" #password><br>

    <button type="submit" (click)="loginAdmin(email.value,password.value)">Login as Admin</button>
    <button type="submit" (click)="this.loginServiceasAdmin.logout()">Logout</button>

</form>

【问题讨论】：

Firebase 是一个封闭环境的工作库。你需要使用它给你的东西。尝试阅读/观看一些教程，然后开始编写代码。

标签： javascript angular firebase firebase-authentication

【解决方案1】：

登录服务的简单示例：

export class AuthService {

  user$: Observable<firebase.User>

  constructor(private afAuth: AngularFireAuth) {
    this.user$ = this.syncUser()
  }

  // function trigered once are listen when user is logged in.
  syncUser() {
    return this.afAuth.authState.pipe(
      switchMap(user => {
        if(user){
          return of(user)
        } else {
          return of(null)
        }
      })
    )
  }
// return is not necesery you can allways listen in real time user$ variable.
async signInWith(credentials: IdCredentials) {
        const result = await this.afAuth.auth.signInWithEmailAndPassword(credentials.email, credentials.password)
        return result
  }

}

【讨论】：

【解决方案2】：

确保在你的模块中你使用模拟器的 Url 如下：

['http://localhost:<portnumber>', <portnumber>]

而不是

['http://localhost', <portnumber>]

【讨论】：