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

Question

我刚开始学习 Web 开发，但我并不完全了解身份验证。
我使用 Express JS 编写了一个 API，并且(不幸的是)决定使用 Vue JS 在一个单独的 Web 应用程序中编写我的前端。我现在正在尝试使用 Passport JS 添加登录系统，并且意识到将后端与前端分开的缺点。
我应该在哪里初始化 Passport JS？我最初的想法是在我的 Vue 应用程序中初始化它，并从我的 API 验证用户名和密码。然而，所有的文档都是关于初始化它的后端。
基本上我只是想知道后端和前端分离的应用程序的典型架构是什么样的。

Answer 1

您在后端设置身份验证。您的前端所做的基本上就是通过 API 端点向后端发送请求。
在 request to login在这种情况下，您的前端将向后端发送请求，通常发送用户名和密码数据，然后在后端收到时，将对数据库进行验证，如果通过，后端将发回带有授权码的响应，例如 JWT token 。
然后你将把它存储在你的前端的 localStorage 或 Cookies 中(这将是关于哪个更好用的另一场辩论)。
现在，一旦您拥有身份验证 token ，每次您想要访问安全的 API 端点时，您可能需要将身份验证代码与您的请求一起传递给后端，通常在 header 中，以便后端可以使用该代码作为身份验证 key 以允许您可以访问已登录或授权用户的页面/端点。