Firebase认证成功后JavaScript页面跳转失败求助

嘿，我帮你梳理下问题所在——你的代码里有两个关键问题导致跳转失效，咱们一步步来解决：

1. 表单默认提交行为没被阻止 #

你的表单带有method="post"属性，点击登录按钮时，浏览器会默认触发表单提交并刷新页面。这就导致你的JavaScript跳转代码刚要执行，页面就被刷新打断了，自然看不到跳转效果。

解决方法很简单，在点击事件里先阻止默认行为：

loginBtn.addEventListener('click', e => {
  e.preventDefault(); // 必须加这行，拦住表单默认提交
  // 后续代码...
});

2. 错误处理了Firebase的异步认证 #

signInWithEmailAndPassword是异步方法，它返回的promise是一个处于Pending状态的Promise对象，不是布尔值。你直接用if(promise)判断，这个条件永远为真，但这时候认证其实还没完成，紧接着就被页面刷新打断了。

正确的做法是用.then()处理成功回调，.catch()处理失败：

const txtEmail = document.getElementById('email');
const txtPass = document.getElementById('password');
const loginBtn = document.getElementById('reg');

loginBtn.addEventListener('click', e => {
  e.preventDefault(); // 阻止表单默认提交
  const mail = txtEmail.value;
  const pass = txtPass.value;
  const auth = firebase.auth();

  // 用异步回调处理认证结果
  auth.signInWithEmailAndPassword(mail, pass)
    .then(() => {
      // 只有认证成功后才执行跳转
      window.location = "{{ route('users') }}";
      console.log("跳转路由：{{ route('users') }}");
    })
    .catch(error => {
      // 这里可以加登录失败的提示，比如弹框
      console.error('登录出错:', error.message);
      alert('登录失败：' + error.message);
    });
});

额外要检查的点 #

• 打开浏览器的页面源码，确认{{ route('users') }}已经被渲染成了正确的URL（比如/users这类实际路径），而不是还带着模板标签
• 检查浏览器控制台有没有Firebase初始化相关的报错，确保SDK已经正确加载
• 确认users路由在后端是存在且可访问的

为啥原来的日志能打印但跳转失败？ #

因为console.log是同步执行的，会立刻输出内容，但window.location刚要执行，表单的默认提交就触发了页面刷新，跳转动作被刷新覆盖了，所以看起来跳转没生效。

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