在现代 web 应用程序中，JSON Web Token（JWT）已成为一种常见的身份验证机制。但是，关于在前端应用程序中如何存储和使用 JWT，存在许多不同的意见和实践。在本文中，我们将探讨在基于浏览器的应用程序中保存 JWT 的最佳实践以及如何使用它来进行身份验证。
关于 JWT
JSON Web Token（JWT）是一种轻量级的身份验证和授权机制，它由三个部分组成：头部、载荷和签名。头部包含算法和类型信息，载荷包含用户信息和元数据，签名则用于验证 JWT 的完整性和真实性。
JWT 的优点之一是它可以在服务器和客户端之间传输，并且可以被存储在客户端的 cookie 或本地存储中。这使得 JWT 成为一种非常灵活的身份验证方案，特别是对于单页应用程序（SPA）和移动应用程序等无状态客户端应用程序。
存储 JWT 的位置
在基于浏览器的应用程序中，有几种可行的选项来存储 JWT：
存储在 Cookie 中
将 JWT 存储在 cookie 中是一种常见的方法，尤其是对于需要与传统的服务器端应用程序进行集成的情况。可以使用 JavaScript document.cookie API 来创建和读取 cookie。
-- -- ------ --------------- - ------------------------- -------- -- -- ------ ----- --- - --------------------------------------------------------------------- ------
但是，需要注意的是，将 JWT 存储在 cookie 中可能会受到跨站点脚本攻击（XSS）和跨站点请求伪造攻击（CSRF）等安全问题的影响。为了解决这些问题，可以考虑设置 cookie 的 HTTP 只读标志（HttpOnly）和安全标志（Secure）。
存储在本地存储中
除了 cookie，还可以将 JWT 存储在浏览器的本地存储中，包括 localStorage 和 sessionStorage。这种方法通常比 cookie 更安全，因为它不容易受到 CSRF 攻击，并且可以更轻松地控制访问权限。
-- ------ --------------------------- --------------------- -- ------ ----- --- - ----------------------------
但是，需要注意的是，localStorage 和 sessionStorage 也有一些安全风险，例如 XSS 和同源策略等问题。因此，对于需要高度安全性的应用程序，最好使用服务器端存储来保存 JWT。
存储在内存中
另一种将 JWT 存储在浏览器中的方法是将其存储在 JavaScript 内存中。这种方法可能比其他选项更安全，因为它不会受到许多常见的安全问题的影响。但是，需要注意的是，如果用户刷新页面或关闭浏览器，JWT 将丢失并需要重新生成。
-- ------ --- ---- -- -- --- --- - -------------------- -- -- --- -----------------
如何使用 JWT 进行身份验证
一旦您决定在哪里存储 JWT，接下来就可以使用它来进行身份验证了。通常情况下，身份验证涉及在每个请求中发送 JWT，并在服务器端进行验证。以下是一个示例代码片段，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28056