如何使用Firebase实时数据库实现用户名密码登录验证？

首先，你遇到的核心问题是Firebase数据库的操作是异步的，你在回调函数里定义的pass变量在外部无法直接访问，这就是console.log(pass)会显示undefined的原因。下面是修正后的代码，能实现你需要的用户名密码比对逻辑：

// 获取表单元素
const loginForm = document.querySelector('#login-form');
loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // 获取用户输入的账号密码
  const inp_username = loginForm['username'].value.trim();
  const inp_password = loginForm['password'].value.trim();

  // 验证输入是否为空
  if (!inp_username || !inp_password) {
    alert('请填写完整的用户名和密码');
    return;
  }

  // 访问数据库中对应用户名的节点
  firebase.database().ref('login').child(inp_username).once('value')
    .then((snapshot) => {
      // 检查用户是否存在
      if (!snapshot.exists()) {
        alert('用户名不存在，请检查输入');
        return;
      }
      
      // 获取数据库中存储的密码
      const storedPassword = snapshot.val().password;
      
      // 比对密码
      if (inp_password === storedPassword) {
        // 验证成功，跳转到目标页面
        window.location.href = '/your-target-page.html'; // 替换成你的实际跳转路径
      } else {
        // 密码错误提示
        alert('密码错误，请重新输入');
      }
    })
    .catch((error) => {
      // 处理数据库访问错误
      console.error('数据库访问出错:', error);
      alert('登录过程中出现错误，请稍后重试');
    });
});

关键改进点： #

• 使用once('value')替代on('value')：登录验证只需要获取一次数据，不需要实时监听节点变化，这样更高效。
• 用Promise的then/catch处理异步操作：确保在获取到数据库数据后再进行密码比对，彻底解决变量作用域问题。
• 添加输入合法性检查：防止空输入提交，提升用户体验。
• 完善错误处理：覆盖用户不存在、密码错误、数据库访问失败等多种场景的提示。

另外看到你更新说已经通过Firebase Auth + 邮箱解决了问题，这其实是更推荐的方案！Firebase Auth提供了现成的身份验证机制，比自己在Realtime Database存密码更安全（它会自动加密存储用户凭证），还支持邮箱密码登录、第三方登录等多种方式，后续扩展功能也更方便。

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