将 Angular 登录和注册表单与 MEAN Stack 中的后端连接

在上一节中，我们成功地在请求时创建了用户。现在，我们需要将我们的 Angular 表单与后端路由连接起来。我们将使用以下步骤将表单与后端连接：

1) 我们将返回到我们的注册组件，现在我们希望向后端发送一个请求来创建一个新用户。为此，我们将在 auth 文件夹中创建一个单独的 service.ts 文件。

2) 在此文件中，我们将导出一个类，即 AuthService，在此之前，我们将添加 @Injectable，我们必须从 Angular 包中导入。在这个 @Injectable 中，我们将 providedIn 设置为 true，就像我们在 service.ts 文件中所做的那样。

3) 在 AuthService 类中，我们将创建一个新方法，即 CreateUser。此方法将接受一个电子邮件（字符串）和一个密码（也是字符串）。

4) 在此方法中，我们将发送一个 HTTP 请求，为此，我们需要像我们对 post 请求所做的那样，使用客户端注入我们的 http 客户端。

5) 我们成功地注入了 http 客户端，现在在 CreateUser() 方法中，我们将发送请求。我们将使用 http 客户端来发送一个 post 请求，因为我们在后端接受 post 请求。

6) 我们还需要向该请求附加一些数据。为此，我们将创建一个新模型，因此我们将创建一个新文件 auth-data.model.ts

7) 在此文件中，我们将导出一个接口来定义我们的身份验证数据应该是什么样子。我们将这个接口命名为 AuthData，我们的身份验证数据将是一个电子邮件（字符串）和一个密码（也是字符串）。

我们也可以创建一个用户模型，但是用户不应该始终在前端附加密码。我们不想在前端的任何地方长时间存储密码。因此，我们将使用 AuthData 将数据提交到后端，如果我们以后需要一个用户（我们确实需要），我们将添加一个单独的模型。

8) 对于 AuthService，我们现在可以基于该 AuthData 模型创建一个新对象。因此，我们将创建一个新的常量 authData，它的类型为 AuthData，并创建一个新对象，该对象需要有一个电子邮件和密码。现在，我们将该 authData 附加到请求中。

9) 现在，我们也将返回结果或响应。我们将以以下方式发回响应：

10) 现在，最后一件事是将该 auth 服务连接到我们的注册组件。我们已经在一个根级别上提供了它，所以剩下的就是要在这里注入它。我们将向注册组件添加构造函数，将其绑定到类型为 AuthService 的公共属性 authService。

11) 现在，在 onSignup() 方法中，我们将发送该请求。首先，我们要确保我们得到一个电子邮件和密码，所以如果表单无效，我们将简单地编写返回语句；否则，我们将运行我们的 authService 类的 CreateUser() 方法，并将电子邮件和密码值传递给该函数，如下所示：

现在，我们将保存所有文件并返回到我们的 Angular 应用程序。如果我们尝试注册用户，我们将在控制台中看到电子邮件和哈希密码。

一切运行良好。现在，我们有了一种创建新用户的方法，下一步是利用这一点，能够让用户登录并让他们创建帖子，另一方面，我们要确保他们不能删除不是该用户创建的帖子。我们将在下一节中完成所有这些。