说下JWT的认证过程

JWT（JSON Web Token）的认证过程，从前端开发的角度来看，主要涉及以下步骤：

用户登录: 用户提交登录信息（例如用户名和密码）到服务器。
服务器验证: 服务器验证用户凭据。如果验证成功，服务器会创建一个JWT。
JWT生成: JWT包含三个部分，用.分隔：
- Header (头部): 通常包含token的类型（JWT）和使用的哈希算法（例如HS256或RS256）。例如：{"alg": "HS256", "typ": "JWT"}
- Payload (有效载荷): 包含用户的声明信息，例如用户ID、用户名、角色、过期时间等。这些信息可以被客户端访问，但不应该包含敏感信息，因为它们可以被解码。例如：{"sub": "1234567890", "name": "John Doe", "iat": 1516239022}
- Signature (签名): 这是JWT的防篡改部分。服务器使用Header中指定的算法和一个密钥（Secret Key）对Header和Payload进行签名。例如：HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
这三个部分会被Base64Url编码后拼接在一起，形成最终的JWT字符串。
服务器返回JWT: 服务器将生成的JWT返回给客户端，通常放在Authorization header中，使用Bearer scheme。例如：Authorization: Bearer <token>
客户端存储JWT: 客户端（浏览器）通常将JWT存储在localStorage或sessionStorage中。 Cookie也是一种选择，但需要正确设置HttpOnly和Secure标志以防止XSS攻击。
后续请求: 客户端在后续的每个请求中都将JWT添加到Authorization header中发送到服务器。
服务器验证JWT: 服务器收到请求后，会验证JWT的签名，确保JWT没有被篡改。还会检查JWT是否过期。
授权访问: 如果JWT有效，服务器会根据Payload中的声明信息授权用户访问相应的资源。

前端开发的重点:

发送JWT: 确保在每个请求的Authorization header中包含JWT。可以使用拦截器（例如Axios拦截器）来简化这个过程。
存储JWT: 选择合适的存储机制（localStorage, sessionStorage, cookie），并注意安全问题。
处理过期JWT: 当JWT过期时，前端需要处理相应的逻辑，例如跳转到登录页面或刷新token。这通常涉及到实现token刷新机制。
解析JWT (可选): 前端可以解码JWT的Payload部分来获取用户信息，但不要依赖于其中的信息进行安全相关的操作，因为这些信息可以被篡改。所有安全相关的验证都应该在服务器端进行。

示例 (使用Axios拦截器):

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});