如何在Vue.js中显示Firebase返回的精确错误信息

我来帮你搞定这个问题！你现在遇到的情况是，axios在捕获错误时，直接访问的error.code和error.message其实是axios本身的错误信息（比如"Request failed with status code 400"），而Firebase返回的具体错误细节藏在响应数据的嵌套结构里。

问题根源 #

当请求返回400这类状态码时，axios会把服务器返回的响应数据放在error.response.data里，Firebase的错误信息就包含在这个对象的error字段中，也就是你看到的：

{
  "error": {
    "code": 400,
    "message": "EMAIL_NOT_FOUND",
    "errors": [
      {
        "message": "EMAIL_NOT_FOUND",
        "domain": "global",
        "reason": "invalid"
      }
    ]
  }
}

修改后的代码实现 #

你只需要在catch块里调整错误信息的获取方式，同时可以加一层判断，避免网络错误等没有response的情况导致报错：

actions: {
  signup({ commit, dispatch }, formData) {
    axios
      .post('accounts:signUp?key=XXXXXXXXXXXX', {
        email: formData.email,
        password: formData.password,
        returnSecureToken: true
      })
      .then(res => {
        commit('userData', { token: res.data.idToken, userId: res.data.localId });
        dispatch('storeUserInfo', formData);
        console.log(res);
      })
      .catch(error => {
        // 先判断是否是响应错误（有返回数据的情况）
        if (error.response) {
          const firebaseError = error.response.data.error;
          // 获取Firebase返回的具体错误code
          const errorCode = firebaseError.message;
          // 可以在这里做错误信息的映射，转成友好的中文提示
          const errorMessageMap = {
            'EMAIL_NOT_FOUND': '没有与此标识符对应的用户记录，用户可能已被删除。',
            'INVALID_PASSWORD': '密码无效或用户没有设置密码。',
            'USER_DISABLED': '用户账户已被管理员禁用。',
            // 可以根据需求添加更多Firebase错误code的映射
          };
          const showMessage = errorMessageMap[errorCode] || firebaseError.message;
          alert(showMessage);
          console.log('Firebase错误code:', errorCode);
        } else {
          // 处理网络错误等没有响应的情况
          alert('网络错误，请稍后重试');
          console.log(error.message);
        }
      });
  },
}

关键说明 #

• 优先判断error.response是否存在：因为如果是网络中断这类错误，不会有服务器返回的response，直接访问error.response会报错。
• 错误信息映射表：把Firebase的英文错误code转成用户易懂的中文提示，提升体验。你可以根据Firebase Auth的官方错误列表，补充更多映射项。

这样一来，用户就能看到你想要的精确错误提示啦！

内容的提问来源于stack exchange，提问作者skr