如何在浏览器环境中使用了localStorage来存储JWT

在浏览器环境中，Local Storage（本地存储）是一种持久化的存储机制，可以用来保存用户的敏感信息，如JWT（JSON Web Tokens）。以下是使用localStorage存储JWT的基本步骤：

1. **生成JWT** 当用户登录成功后，后端服务器会生成一个JWT作为访问权限凭证。JWT包含一些元数据以及用户的标识信息，通常使用`jsonwebtoken`库在Node.js或类似工具中生成。

// 假设我们有一个名为`generateToken`的函数，它接受用户名和密码并返回JWT
const jwt = generateToken(username, password);

2. **存储JWT** 使用JavaScript的`localStorage.setItem`方法将JWT存储起来，键通常是“jwt”或其他描述性的名称：

localStorage.setItem('jwt', jwt);

注意，为了安全性，最好对JWT进行加密后再存储，以防数据泄露。

3. **获取JWT** 需要访问JWT时，可以使用`localStorage.getItem`获取：

const storedJwt = localStorage.getItem('jwt');

4. **验证JWT** 发送请求之前，可以在发送请求之前检查JWT是否已存在并有效。如果JWT已过期，可能需要重新登录或刷新。

5. **发送请求** 在axios的配置中，我们可以把JWT放在Authorization头部，格式通常为`Bearer <token>`：

axios.defaults.headers.common['Authorization'] = `Bearer ${storedJwt}`;

然后每次向后端发出请求时，JWT就会自动附加到请求头中。

6. **清理JWT** 当用户登出或JWT过期时，从localStorage中移除JWT：

localStorage.removeItem('jwt');

记得遵守最佳实践，对于重要的敏感数据，考虑定期更新或刷新JWT，而不是永远保持不变。