Flutter基于Firebase Realtime Database实现ID密码登录及数据传递到用户资料页

现有登录代码优化建议 #

• 补充密码校验逻辑：当前代码只要匹配到对应ID就直接跳转，没有校验用户输入的密码和数据库存储的密码是否一致，存在严重安全漏洞
• 增加空值异常处理：如果输入的ID不存在，snapshot.value会返回null，直接调用forEach遍历会触发空指针报错，需要提前做判断
• 替换.then链式调用为async/await写法：代码可读性更高，更便于处理异常逻辑
• 增加加载状态提示：用户点击登录按钮后增加Loading弹窗，避免用户重复点击，也能明确告知用户登录操作正在进行
• 不要在Realtime Database中明文存储密码：后续上线前务必将密码做哈希加密后再存储，避免数据泄露风险

实现用户数据传递到资料页的方案 #

你只需要给StaffProfile页面增加构造参数接收用户数据，跳转时将获取到的用户信息传入即可，示例如下：
首先修改StaffProfile的代码：

class StaffProfile extends StatelessWidget {
  // 定义接收用户数据的参数
  final Map<dynamic, dynamic> userInfo;
  const StaffProfile({Key? key, required this.userInfo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面里直接用userInfo["name"]、userInfo["email"]就能对应展示数据了
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("姓名：${userInfo["name"]}"),
            Text("邮箱：${userInfo["email"]}"),
            Text("联系电话：${userInfo["contact no"]}"),
          ],
        ),
      ),
    );
  }
}

然后修改登录页的loginfb方法：

void loginfb(String userID, String password) async {
  // 弹出加载提示
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => const AlertDialog(content: Text("登录中...")),
  );
  try {
    DataSnapshot snapshot = await dataRef.orderByChild("id").equalTo(userID).once();
    // 关闭加载提示
    Navigator.pop(context);
    if (snapshot.value == null) {
      // 提示用户ID不存在
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("该员工ID不存在")));
      return;
    }
    Map<dynamic, dynamic> values = snapshot.value as Map<dynamic, dynamic>;
    values.forEach((key, userData) {
      // 校验密码是否匹配
      if (userData["password"] == password) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            // 传入用户数据到资料页
            builder: (context) => StaffProfile(userInfo: userData),
          ),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("密码错误")));
      }
    });
  } catch (e) {
    Navigator.pop(context);
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("登录失败：${e.toString()}")));
  }
}

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