Token是一种用于身份验证的令牌,通常用于前后端交互。由于Token有过期时间,当Token过期后,需要重新获取新的Token。因此,前端需要实现Token的自动刷新来避免用户在使用过程中因Token过期而需要重新登录的情况。以下是前端无感刷新Token的方法:
1. 使用setInterval定时刷新Token
可以使用setInterval函数定时向后端服务器请求新的Token来刷新旧的Token。例如,在每个小时的59分钟时刷新Token:
setInterval(() => {
// 向后端服务器发送请求获取新的Token
}, 59 * 60 * 1000);
2. 使用setTimeout延时刷新Token
可以使用setTimeout函数在Token过期前一段时间刷新Token。例如,在Token过期前5分钟刷新Token:
setTimeout(() => {
// 向后端服务器发送请求获取新的Token
}, (tokenExpireTime - Date.now() - 5 * 60 * 1000));
3. 使用axios拦截器自动刷新Token
可以使用axios拦截器,在每次向后端服务器发送请求前判断Token是否过期,如果过期则自动刷新Token。以下是一个示例:
import axios from 'axios';
const api = axios.create({
baseURL: '<http://example.com/api>',
timeout: 5000,
});
api.interceptors.request.use(
(config) => {
const tokenExpireTime = localStorage.getItem('tokenExpireTime');
if (tokenExpireTime && Date.now() > tokenExpireTime) {
// 向后端服务器发送请求获取新的Token
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
export default api;
以上是一些前端无感刷新Token的方法,可以根据具体的项目需求进行选择和实现。