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令牌。

然后你会把它存储在你的前端的localStorage或Cookie中(这将是另一个关于使用哪一个更好的争论)。

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