无感刷新 token 的实现通常基于以下几个步骤:
- Token 有效期:首先,服务器会为每个 token 设置一个有效期,例如 30 分钟或 1 小时。在这个有效期内,用户可以使用 token 访问受保护的资源。
- 定期检查:前端应用会在用户活动期间定期检查 token 的有效期。通常通过轮询或心跳机制实现,即在一定时间间隔后发送请求到服务器,检查 token 是否仍然有效。
- 刷新 Token:如果服务器返回 token 已失效的信息,前端应用会立即发起一个新的请求到认证服务器,使用refreshToken这个token(后端一般会返回一个长token和一个短token,长短指的是过期时间,refreshToken作为长token存在localstorage中用来向后端携带这个token去请求短token,accessToken作为短token也是存在localstorage中用这个token去请求受保护的请求放到请求头headers中)来获取新的访问 token。
- 无缝切换:在获取到新 token 后,前端应用会立即更新本地存储的 token,并使用新 token 继续之前的操作,从而实现了无缝的用户体验
示例:
- 设置 Token 有效期:假设服务器为每个 token 设置了 30 分钟的有效期。
- 定期检查:前端应用每 5 分钟向服务器发送一个请求,检查当前 token 是否仍然有效。
// 使用 setInterval 定时发送心跳请求
setInterval(() => {
checkTokenValidity();
}, 5 * 60 * 1000); // 5 分钟
3、检查 Token 有效性:前端应用发送心跳请求到服务器,服务器返回 token 是否有效的信息
async function checkTokenValidity() {
try {
const response = await fetch('/api/heartbeat', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
if (!response.ok) {
// Token 失效,需要刷新
refreshToken();
}
} catch (error) {
// 处理错误
console.error('Error checking token validity:', error);
}
}
4、刷新 Token:如果 token 失效,前端应用会发送一个请求到认证服务器,获取新的访问 token。
async function refreshToken() {
try {
const response = await fetch('/api/auth/refresh', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
refreshToken: localStorage.getItem('refreshToken')
})
});
if (response.ok) {
const data = await response.json();
// 更新本地存储的 token
localStorage.setItem('accessToken', data.accessToken);
} else {
// 处理刷新 token 失败的情况,例如提示用户重新登录
console.error('Failed to refresh token:', response.status);
}
} catch (error) {
// 处理错误
console.error('Error refreshing token:', error);
}
}
总结:在这个示例中,前端应用通过定期检查 token 的有效性,并在 token 失效时无缝刷新 token,从而保持了用户的登录状态,并提供了无缝的用户体验。需要注意的是,为了安全起见,刷新 token 也应该有一定的有效期,并在过期后要求用户重新登录