Vue JS 应用程序上的 Passport JS 身份验证

Question

我刚刚开始学习网络开发，不太了解身份验证。

我使用 Express JS 编写了一个 API，并且（不幸的是）决定使用 Vue JS 在单独的 Web 应用程序中编写前端。我现在尝试使用 Passport JS 添加登录系统，并意识到将后端与前端分离的缺点。

我应该在哪里初始化 Passport JS？我最初的想法是在我的 Vue 应用程序中初始化它，并从我的 API 中获取用户名和密码的验证。然而，所有文档都是关于初始化它的后端。

基本上我只是想知道后端和前端分离的应用程序的典型架构是什么样的。

Answer 1

您可以在后端设置身份验证。前端所做的基本上就是通过 API 端点向后端发送请求。

在一种request to login情况下，您的前端将向后端发送请求，通常发送用户名和密码数据，然后当后端收到时，将根据数据库进行验证，如果通过，后端将发回带有授权的响应代码，例如 JWT 令牌。

然后，您将其存储在前端的 localStorage 或 Cookie 中（这将是关于哪个更好使用的另一场争论）。

现在，一旦您拥有了身份验证令牌，每次您想要访问安全的 API 端点时，您可能需要将身份验证代码与您的请求一起传递到后端（通常位于标头中），以便后端可以使用该代码作为身份验证密钥来允许您可以访问已登录或授权用户的页面/端点。