在基于浏览器的应用程序中保存 JWT 并如何使用它-JavaScript中文网-JavaScript教程资源分享门户

在现代 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。

// 设置 cookie
document.cookie = "jwt=YOUR_JWT_TOKEN_HERE; path=/";

// 读取 cookie
const jwt = document.cookie.replace(/(?:(?:^|.*;\s*)jwt\s*\=\s*([^;]*).*$)|^.*$/, "$1");

但是，需要注意的是，将 JWT 存储在 cookie 中可能会受到跨站点脚本攻击（XSS）和跨站点请求伪造攻击（CSRF）等安全问题的影响。为了解决这些问题，可以考虑设置 cookie 的 HTTP 只读标志（HttpOnly）和安全标志（Secure）。

存储在本地存储中

除了 cookie，还可以将 JWT 存储在浏览器的本地存储中，包括 localStorage 和 sessionStorage。这种方法通常比 cookie 更安全，因为它不容易受到 CSRF 攻击，并且可以更轻松地控制访问权限。

// 设置本地存储
localStorage.setItem("jwt", YOUR_JWT_TOKEN_HERE);

// 读取本地存储
const jwt = localStorage.getItem("jwt");

但是，需要注意的是，localStorage 和 sessionStorage 也有一些安全风险，例如 XSS 和同源策略等问题。因此，对于需要高度安全性的应用程序，最好使用服务器端存储来保存 JWT。

存储在内存中

另一种将 JWT 存储在浏览器中的方法是将其存储在 JavaScript 内存中。这种方法可能比其他选项更安全，因为它不会受到许多常见的安全问题的影响。但是，需要注意的是，如果用户刷新页面或关闭浏览器，JWT 将丢失并需要重新生成。

// 存储在变量中
let jwt;

// 设置 JWT
jwt = YOUR_JWT_TOKEN_HERE;

// 读取 JWT
console.log(jwt);

如何使用 JWT 进行身份验证

一旦您决定在哪里存储 JWT，接下来就可以使用它来进行身份验证了。通常情况下，身份验证涉及在每个请求中发送 JWT，并在服务器端进行验证。以下是一个示例代码片段，

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28056