当前位置：首页 > news >正文

token无感刷新

news 来源：原创 2024/6/29 21:05:25

Token无感刷新通常指的是在用户不知情的情况下自动刷新认证Token，以保持用户的会话状态。这通常在使用JWT（JSON Web Tokens）作为认证方式时使用。以下是实现无感刷新的一种常见方法：

1. 前端请求拦截：

在发送请求前，检查Token的有效期。

如果Token即将过期（例如，距离过期时间小于5分钟），则自动发送一个刷新Token的请求。

2. 后端刷新逻辑：

后端接收到刷新Token的请求后，验证旧Token的有效性。

如果旧Token有效，后端生成一个新的Token并返回。

3. 前端响应拦截：

捕获到需要认证的请求（例如401状态码：HTTP401错误代表用户没有访问权限，需要进行身份认证），自动重发刷新Token的请求。

使用新的Token重发原请求。

4. 存储和替换Token：

前端在接收到新的Token后，替换存储中的旧Token。

这种机制确保了用户在使用应用时，Token可以在用户不知情的情况下被更新，避免了用户因Token过期而需要重新登录的情况。

前端（使用Axios拦截器）

axios.interceptors.request.use(async (config) => {const token = getToken(); // 从存储中获取Tokenconst tokenExpiration = getTokenExpiration(); // 获取Token的过期时间const now = Date.now();if (token && tokenExpiration && (tokenExpiration - now < 5 * 60 * 1000)) {// Token即将过期，需要刷新const newToken = await refreshToken(); // 刷新Token的函数setToken(newToken); // 更新存储中的Tokenconfig.headers['Authorization'] = `Bearer ${newToken}`;}return config;},error => Promise.reject(error)
);axios.interceptors.response.use(response => response,async (error) => {if (error.response.status === 401) {// Token过期，需要刷新const newToken = await refreshToken();setToken(newToken);error.config.headers['Authorization'] = `Bearer ${newToken}`;return axios(error.config); // 重发原请求}return Promise.reject(error);}
);

这种方法确保了用户体验的连贯性，同时保持了系统的安全性。