关于token的无感刷新

在许多 Web 应用程序中，安全地管理用户身份是至关重要的。使用 JSON Web Token (JWT) 可以有效实现身份验证，但令牌的有效期限制了应用程序的使用体验。为了解决这个问题，我们可以实现一种无感刷新令牌（silent token refresh）的机制，当访问令牌过期时，自动获取新的令牌而无需用户重新登录。

本文将介绍如何在前端应用程序中实现 JWT 无感刷新令牌机制，主要使用 Axios 拦截器来处理令牌的刷新和更新。

实现过程

1. 设置 Axios 拦截器

// 添加拦截器，在请求中加入访问令牌
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accessToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 处理未授权响应并刷新令牌
axios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = localStorage.getItem('refreshToken');
      const response = await axios.post('/refresh-token', { refreshToken });
      const newAccessToken = response.data.accessToken;
      localStorage.setItem('accessToken', newAccessToken);
      return axios(originalRequest);
    }
    return Promise.reject(error);
  }
);

2. 解释代码

上述代码中的第一个拦截器用于在每个请求中添加访问令牌。如果存在有效的访问令牌，则会将其添加到请求的标头中。

第二个拦截器用于处理未授权的响应。当接收到 401 错误（未授权）时，它首先检查是否已经尝试过重新发送请求。如果没有，它会获取本地存储中的刷新令牌，并向服务器发出请求以获取新的访问令牌。获取到新的访问令牌后，会将其存储在本地存储中，并重新发送之前失败的请求。

这样就实现了无感刷新令牌的机制，用户无需手动操作即可获取新的访问令牌。

以上就是如何在前端应用程序中实现 JWT 无感刷新令牌机制的基本内容。希望这篇博客能够帮助你更好地理解并实现无感刷新令牌的功能。