在 MEAN 栈中将令牌发送到前端

在我们之前的章节中，我们成功创建了 JSON Web 令牌。在本节中，我们将学习如何将此 Web 令牌发送到前端。问题是我们将如何返回该令牌。为此，我们将使用以下步骤

1) 我们将创建一个新的响应，并将状态码设置为 200，因为这里我们已成功进行身份验证，并且我们将发送一个 JSON 响应，我们可以在其中发送消息，但最重要的是，我们将在其中设置我们的令牌。因此，我们将在那里返回我们先前生成的令牌。

2) 后端已完成，转到前端。在 auth.service.ts 文件中，我们将创建一个新的方法 loginUser()。在那里，我们肯定需要一个电子邮件和一个密码，因为我们需要将数据发送到后端。然后，我们将再次发送一个 post 请求 0，并且我们将发送一个 post 请求到相同的 URL（几乎），结尾将是 /login 以定位新创建的路由，但我们还将创建我们的 auth 数据，就像注册一样，并像这样追加我们的 AuthData

3) 现在，我们需要订阅它，为此，我们只需控制台记录响应以查看其中的内容。对于有效的凭据，我们应该在那里看到令牌。

4) 现在，我们需要将新连接的服务方法连接到登录组件，为此，在登录组件中，我们将再次注入类型为 AuthService 的 authservice。我们需要像这样在顶部添加导入

5) 现在，在我们的 onLogin() 方法中，我们将检查表单无效的情况。因此，如果我们的表单无效，我们将简单地添加 return 语句。否则，我们将通过调用 authservice 的 loginUser() 方法来发送该请求。我们将电子邮件和密码值传递给该函数，如下所示

如果在注册后尝试登录，将会抛出一个错误，即 **"user1 is not defined"**。

6) 为了解决这个问题，我们将回到我们的 user.js 文件，在那里我们使用 user1 变量，它不在第二个 then 块的范围内。因此，我们将创建另一个变量，即 fetcheduser 并分配 user1 值，以便它可以在第二个 then 块中访问。

现在，如果我们回到我们的应用程序并尝试登录，我们将在开发者控制台中看到令牌。

在下一节中，我们将把该令牌存储在我们的前端代码中，然后使用它进行身份验证，以便将来请求保护路由。