Firebase登录按钮优化：仅验证通过后跳转至首页

你当前的问题在于登录函数内部捕获了错误但没有将失败状态传递给按钮的点击逻辑，导致无论登录成功与否，navigate都会被执行。以下是两种可行的修改方案：

方案一：通过抛出错误控制跳转逻辑 #

修改登录函数 #

在登录函数的catch块中重新抛出错误，让调用方能够感知登录失败：

const logInWithEmailAndPassword = async (email, password) => {
  try {  
    await signInWithEmailAndPassword(auth, email, password);
  } catch (err) {
    console.error(err);
    alert("Email or Password not Registered!");
    throw err; // 重新抛出错误，通知调用方登录失败
  }
};

修改登录按钮逻辑 #

在按钮的点击事件中添加try-catch，仅当登录成功时执行跳转：

<button 
  onClick={async () => {
    try {
      await logInWithEmailAndPassword(email, password);
      navigate('/Login/HomePage'); // 登录成功才跳转
    } catch (err) {
      // 无需额外处理，登录函数已弹出错误提示
    }
  }}
>
  Login
</button>

方案二：通过返回状态标识控制跳转 #

修改登录函数 #

让登录函数返回布尔值表示登录是否成功：

const logInWithEmailAndPassword = async (email, password) => {
  try {  
    await signInWithEmailAndPassword(auth, email, password);
    return true; // 登录成功返回true
  } catch (err) {
    console.error(err);
    alert("Email or Password not Registered!");
    return false; // 登录失败返回false
  }
};

修改登录按钮逻辑 #

根据登录函数返回的状态判断是否执行跳转：

<button 
  onClick={async () => {
    const loginSuccess = await logInWithEmailAndPassword(email, password);
    if (loginSuccess) {
      navigate('/Login/HomePage'); // 仅成功时跳转
    }
  }}
>
  Login
</button>

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