将jwt保存到本地存储

Question

我目前正在开发一个节点表达postgresql应用程序，并且正在尝试实现Jsonwebtokens作为身份验证。我已经看过多个有关如何实现它的教程，并且在后端部分得到了实现的方法，但是通常会跳过前端，显然每个人都在用Postman测试他们的代码。

我还在线阅读了实现jwt身份验证的推荐方法是将生成的令牌存储在localstorage中，并在需要时将其发送到标头中。但是我无法找到完成的方法...

因此，我的问题是：

1. 后端生成令牌后，如何将其存储在前端？（一个示例会很有帮助，因为我真的不太了解如何在前端javascript程序上获取令牌）
2. 发出需要存储的http请求时，如何在标头上发送令牌？

Answer 1

正如您所说，通常令牌存储在 localStorage 中。

\n\n

\n

localStorage 与sessionStorage 类似，不同之处在于localStorage 中存储的数据没有过期时间，而sessionStorage 中存储的数据会在页面会话结束时（即页面关闭时）被清除。
\n https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

\n

\n\n

为了在前端获取令牌，您可以将用户的电子邮件和密码发送到 URL，以便与令牌​​交换（您必须使用 https）。之后你将它存储为localStorage.setItem(\'key\', value)

\n\n

简短的例子：

\n\n

$.post("/authenticate", {email: userEmail, password: userPassword}, function(data) {\n  localStorage.setItem(\'token\', data.token)\n});\n

\n\n

要取回令牌，例如在刷新后，您必须使用： localStorage.getItem(\'key\')。

\n\n

最后，为了使用此令牌进行身份验证，您可以在Authorizationheaders 属性的不记名标头中发送它。
\n为什么是承载者？=> https://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re

\n\n

例子：

\n\n

$.ajax({\n    type: \'GET\',\n    url: \'/account,\n    headers: {\n        "Authorization": "Bearer " + token\n    }\n}, function(data) { \n    // Authenticated data\n});\n

\n\n

这可能会有所帮助：https://github.com/auth0-blog/angularjs-jwt-authentication-tutorial/blob/master/frontend/login/login.js

\n