Javascript 角度及;Firebase-如何显示错误消息

Javascript 角度及;Firebase-如何显示错误消息,javascript,angular,firebase,firebase-authentication,Javascript,Angular,Firebase,Firebase Authentication,我正在使用的内容 棱角的 火基 我拥有的 一些HTML允许用户通过输入新电子邮件和现有密码来更改电子邮件 输入新的电子邮件和密码后,它们将传递给身份验证服务以运行updateEmail方法 如果用户输入的密码不正确,控制台将记录以下错误: js:1020错误O{code:“auth/ERROR password”,消息:“密码无效或用户没有密码。”} 问题 发生此错误时,如何显示这样的错误消息或自定义消息?(通过标准JS警报) 我的身份验证服务 updateEmailAddress(电子

我正在使用的内容

  • 棱角的
  • 火基
我拥有的

  • 一些HTML允许用户通过输入新电子邮件和现有密码来更改电子邮件
  • 输入新的电子邮件和密码后,它们将传递给身份验证服务以运行updateEmail方法
  • 如果用户输入的密码不正确,控制台将记录以下错误:
js:1020错误O{code:“auth/ERROR password”,消息:“密码无效或用户没有密码。”}

问题

  • 发生此错误时,如何显示这样的错误消息或自定义消息?(通过标准JS警报)
  • 我的身份验证服务

    updateEmailAddress(电子邮件:字符串,密码:字符串){
    const currentUser=firebase.auth().currentUser;
    const credentials=firebase.auth.EmailAuthProvider.credential(currentUser.email,密码);
    currentUser.reauthenticateWithCredential(凭据)。然后(函数(){
    currentUser.updateEmail(email).then(函数(){
    currentUser.sendEmailVerification().then(函数(){
    //发送电子邮件
    }).catch(函数(错误){
    //发生了一个错误。
    });
    }).catch(函数(错误){
    //发生了一个错误。
    });
    });
    }
    
    更新

    从'@angular/core'导入{Injectable};
    从'angularfire2/auth'导入{AngularFireAuth};
    从“firebase/app”导入*作为firebase;
    从'@angular/Router'导入{Router};
    从“rxjs/Observable”导入{Observable};
    导入“rxjs/add/observable/of”;
    @可注射()
    导出类身份验证服务{
    用户:可观察;
    重定向URL:字符串;
    建造师(
    私人firebaseAuth:AngularFireAuth,
    专用路由器(路由器){
    this.user=firebaseAuth.authState;
    }
    //登录表单
    登录(电子邮件:string,密码:string):可观察{
    this.firebaseAuth.auth
    .使用电子邮件和密码登录(电子邮件、密码)
    .然后(值=>{
    this.router.navigate(['projects']);
    可观察的返回(真);
    })
    .catch(错误=>{
    console.log('出现问题:',err.message);
    可观察到的返回(错误);
    });
    返回;
    }
    //帐户管理-使用当前电子邮件和当前密码重新验证用户,然后调用更新电子邮件和电子邮件验证方法
    updateEmailAddress(电子邮件:字符串,密码:字符串){
    const currentUser=firebase.auth().currentUser;
    const credentials=firebase.auth.EmailAuthProvider.credential(currentUser.email,密码);
    currentUser.reauthenticateWithCredential(凭据)。然后(函数(){
    currentUser.updateEmail(email).then(函数(){
    currentUser.sendEmailVerification().then(函数(){
    //发送电子邮件
    }).catch(函数(错误){
    //发生了一个错误。
    });
    }).catch(函数(错误){
    //发生了一个错误。
    警报(ErroAuthEn.convertMessage(错误['code']);
    });
    });
    }
    //登出阿波罗
    注销(){
    this.firebaseAuth.auth.signOut();
    this.router.navigate(['login']);
    }
    //用于检查用户是否登录的方法
    isLoggedIn():布尔值{
    console.log(!!this.firebaseAuth.auth.currentUser);
    return!!this.firebaseAuth.auth.currentUser;
    }
    }
    导出名称空间{
    导出函数convertMessage(代码:string):string{
    log('called');
    开关(代码){
    案例“已禁用身份验证/用户”:{
    返回“抱歉,您的用户已被禁用”;
    }
    案例“未找到身份验证/用户”:{
    返回“抱歉,找不到用户”;
    }
    案例“身份验证/密码错误”:{
    返回“对不起,输入的密码不正确。请重试”;
    }
    默认值:{
    返回“登录错误,请稍后再试”;
    }
    }
    }
    
    }
    最好的解决方案是实现一个函数,该函数可以为文档中的每个错误消息返回一条更易于理解的用户友好消息

    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']));
          });
        });
      }
    

    您真的想使用JS警报还是在页面上显示警告用户的元素?嘿,Ompurdy。理想情况下,这是一个更好的用户体验的元素。但是,现在的任何事情都适合我,所以我可以理解:)只是澄清一下,控制台中的错误不是由您生成的,是吗?这是我的要求?我想是的是的。我没有写任何东西来故意表现它。我以为这是上面firebase代码的一部分。这看起来很棒。快速问题(请原谅新手问题)…当您将消息传递给ErroAuthEn方法时,开关如何知道要显示哪条消息?何时/何处确定“auth/user disabled”(身份验证/用户禁用)?请查看firebase文档,理想情况下,您希望为每个用户发送一条消息,但您可以使用默认设置生成一条通用消息,只需编写最重要的消息。谢谢Eduardo。我不能让它工作。我将在帖子中快速更新我的代码。如果你不介意的话,你能确保我没有错过任何东西吗?非常感谢您的时间。别忘了从“../erro auth en.enum”导入名称空间导入{ErroAuthEn};啊对。所以他们不都进入我的身份验证服务?如果不是,“ErrorAuthEn”是什么类型的文件?服务?