在 React 中使用 Firebase 实时数据库

存储用户数据

到目前为止，只有 Firebase 了解我们的用户。我们的应用程序无法从 Firebase 的认证数据库中检索单个用户或用户列表。

用户数据由 Firebase 内部存储，以确保认证的安全性。这很好，因为我们无需参与存储密码等敏感信息。然而，我们可以引入 Firebase 实时数据库，自行跟踪用户实体。

这样做是合理的，因为这样我们就可以将用户与他们创建的其他领域实体（例如消息、书籍、发票）关联起来。

即使 Firebase 负责处理所有敏感数据，我们也应保持对用户的一定程度的控制。

本节将说明如何在 Firebase 实时数据库中存储用户。首先，我们必须为 Firebase 类初始化实时数据库 API。

初始化实时数据库 API

该方法与我们之前用于认证 API 的方法完全相同：

1import app from 'firebase/app';
2import 'firebase/auth';
3import 'firebase/database';
4
5const config = { ... };
6
7class Firebase {
8  constructor() {
9    app.initializeApp(config);
10
11    this.auth = app.auth();
12    this.db = app.database();
13  }
14
15  // *** 认证 API ***
16
17  ...
18
19}
20
21export default Firebase;

第二步是扩展我们的 Firebase 类的用户实体接口。它定义了两个新函数：

• 一个通过标识符（uid）获取用户引用的函数
• 一个获取所有用户引用的函数

1import app from 'firebase/app';
2import 'firebase/auth';
3import 'firebase/database';
4
5const config = { ... };
6
7class Firebase {
8  constructor() {
9    app.initializeApp(config);
10
11    this.auth = app.auth();
12    this.db = app.database();
13  }
14
15  // *** 认证 API ***
16
17  doCreateUserWithEmailAndPassword = (email, password) =>
18    this.auth.createUserWithEmailAndPassword(email, password);
19
20  doSignInWithEmailAndPassword = (email, password) =>
21    this.auth.signInWithEmailAndPassword(email, password);
22
23  doSignOut = () => this.auth.signOut();
24
25  doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
26
27  doPasswordUpdate = password =>
28    this.auth.currentUser.updatePassword(password);
29
30  // *** 用户 API ***
31
32  user = uid => this.db.ref(`users/${uid}`);
33
34  users = () => this.db.ref('users');
35}
36
37export default Firebase;

ref() 方法中的路径对应于我们在 Firebase 实时数据库中存储用户实体的位置。

如果我们删除 users/5 中的用户，那么 uid = 5 的用户将从数据库中被移除。

如果我们向 users 中添加新用户，Firebase 会为我们生成标识符，并将其分配给传入的所有信息。

这些路径遵循 REST 架构风格，其中每个实体（如用户、消息、书籍、作者）都关联一个 URI，使用 HTTP 方法来创建、更新、删除和获取实体。

在 Firebase 中，RESTful 的 URI 变成了简单的路径，而 HTTP 方法则转化为 Firebase 的 API 操作。

接下来，我们将集成实时数据库后运行并验证我们的应用。