使用React JS和Firebase实现登录时如何校验用户名密码是否存在

你从Firebase拉取的users是对象结构，键为push方法生成的唯一ID，值为对应用户的账号数据，只需把对象转为用户数据数组，遍历匹配输入的用户名和密码即可。
你可以直接替换登录提交函数的逻辑，修改后代码如下：

// 注意修改函数名，避免和组件名Login重名冲突
const handleLogin = e => {
    e.preventDefault();
    // 将users对象转为用户数据的数组
    const userList = Object.values(users);
    // 匹配用户名和密码都一致的用户
    const validUser = userList.find(item => item.username === userName && item.password === password);

    if (validUser) {
        // 登录成功逻辑，可参考注册逻辑存储用户信息跳转
        localStorage.setItem("user-info", JSON.stringify(validUser.name))
        history.push("/allUsers")
    } else {
        // 登录失败提示逻辑
        alert("用户名或密码错误")
    }
}

注意事项 #

• 原代码中组件名和提交函数名都叫Login，会触发命名冲突报错，一定要修改提交函数名，同时form标签的onSubmit也要对应改为onSubmit={handleLogin}
• 生产环境绝对不要明文存储用户密码，入库前必须对密码做哈希加密，校验时先把用户输入的密码做相同加密后再和库中存储的哈希值对比
• 实际项目不建议前端拉取全量用户数据做校验，既不安全也浪费带宽，优先使用Firebase Auth官方登录能力，或者把校验逻辑放到服务端处理

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