Angular 和 Firebase - 如何显示错误消息

Question

我正在使用什么

• 角度
• Firebase

我有什么

• 一些 HTML 允许用户通过输入新电子邮件和现有密码来更改其电子邮件
• 输入新的电子邮件和密码后，它们会被传递给身份验证服务以运行 updateEmail 方法
• 如果用户输入的密码不正确，控制台会记录以下错误：

core.es5.js:1020 ERROR O {code: "auth/wrong-password", message: "密码无效或用户没有密码。"}

问题

1. 如何在发生此错误时显示这样的错误消息或自定义消息？ （通过标准 JS 警报）

我的身份验证服务

 updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
      });
    });
  }

更新

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';


@Injectable()
export class AuthService {
  user: Observable<firebase.User>;
  redirectUrl: string;


  constructor(
    private firebaseAuth: AngularFireAuth,
    private router: Router) {
    this.user = firebaseAuth.authState;
  }


  // Login Form
  login(email: string, password: string): Observable<boolean> {

    this.firebaseAuth.auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        this.router.navigate(['projects']);
        return Observable.of(true);
      })
      .catch(err => {
        console.log('Something went wrong:', err.message);
        return Observable.of(false);
      });

    return;
  }


  // Account Management - Re-authenticate the user using the current email and current password, then call the update email and email verification methods
  updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
         alert(ErroAuthEn.convertMessage(error['code']));
      });
    });
  }


// Log out of Apollo
  logout() {
    this.firebaseAuth.auth.signOut();
    this.router.navigate(['login']);
  }


  // A method to use to check if the user is logged in or not
  isLoggedIn(): boolean {
    console.log(!!this.firebaseAuth.auth.currentUser);
    return !!this.firebaseAuth.auth.currentUser;
  }
}

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
          console.log('called');
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }

                case 'auth/wrong-password': {
                  return 'Sorry, incorrect password entered. Please try again.';
                }

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

Answer 1

最好的解决方案是实现一个函数，为文档中的每个错误消息返回一个更易于理解的用户友好消息。

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }
              .
              .
              .

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

然后在你的组件上你可以这样调用：

updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
      alert( ErroAuthEn.convertMessage(error['code']));
      });
    });
  }