JavaScript能否导出catch捕获的错误？React+Firebase登录错误提示问题

实现方案 #

完全可以通过捕获Firebase Auth抛出的异常实现该需求，Firebase身份认证服务会针对不同登录失败场景返回带有唯一标识的错误码，你只需要在catch块中匹配对应错误码即可展示自定义提示。

具体实现逻辑 #

你调用signInWithEmailAndPassword方法进行邮箱密码登录时，如果邮箱未在Firebase身份认证用户列表中注册，catch捕获的错误对象会返回auth/user-not-found的错误码，你可以直接匹配该值触发你要展示的提示。
示例代码如下：

import { useState } from 'react';
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const auth = getAuth();
    setErrorMsg('');
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功后的跳转逻辑，比如跳转到日记列表页
    } catch (error) {
      // 匹配错误码展示对应提示
      switch(error.code) {
        case 'auth/user-not-found':
          setErrorMsg('该邮箱未注册，请先完成注册后再登录');
          break;
        case 'auth/wrong-password':
          setErrorMsg('密码输入错误，请重新核对后输入');
          break;
        case 'auth/invalid-email':
          setErrorMsg('输入的邮箱格式不符合要求');
          break;
        default:
          setErrorMsg('登录异常，请稍后再试');
      }
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 你的登录表单代码 */}
      {errorMsg && <p className="error-tip">{errorMsg}</p>}
    </form>
  )
}

注意事项 #

如果你需要防范恶意人员枚举平台已注册邮箱，可以在Firebase控制台开启「用户枚举防护」，开启后未注册邮箱和密码错误会返回相同的错误码，无法单独区分未注册场景，你可以根据自身产品的安全需求决定是否开启该功能。

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