"```markdown 实现无感刷新Token 无感刷新Token是通过在用户使用旧Token访问服务端时,服务端验证Token是否过期,如果过期,则返回一个新的Token给用户,用户无需重新登录即可继续访问服务。
实现无感刷新Token的方式通常是使用Refresh Token机制。Refresh Token是一种长期有效的Token,用于获取新的Access Token。当用户的Access Token过期时,可以使用Refresh Token来获取新的Access Token,而无需重新登录。
以下是实现无感刷新Token的一般步骤:
- 客户端在登录成功后,从服务端获取Access Token和Refresh Token,并保存在本地。
- 客户端在每次请求需要鉴权的接口时,携带Access Token进行访问。
- 当服务端验证Access Token过期时,返回特定的状态码,比如401 Unauthorized。
- 客户端收到401状态码后,使用Refresh Token向服务端请求新的Access Token。
- 服务端验证Refresh Token的有效性,如果有效,则生成新的Access Token并返回给客户端。
- 客户端收到新的Access Token后,重新发起原始请求,携带新的Access Token进行访问。
下面是一个简单的示例代码,演示了如何在前端使用Refresh Token实现无感刷新Token:
// 登录成功后获取Access Token和Refresh Token
function login(username, password) {
// 发起登录请求,获取Access Token和Refresh Token
}
// 发起需要鉴权的请求
function fetchData(url, accessToken) {
// 发起请求,携带Access Token
}
// 当服务端返回401状态码时,使用Refresh Token获取新的Access Token
function refreshAccessToken(refreshToken) {
// 发起请求,使用Refresh Token获取新的Access Token
}
// 在请求拦截器中,自动携带Access Token进行请求
axios.interceptors.request.use(
(config) => {
const accessToken = getAccessToken();
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 在响应拦截器中,处理401状态码,使用Refresh Token获取新的Access Token
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
const refreshToken = getRefreshToken();
if (refreshToken) {
return refreshAccessToken(refreshToken).then((newAccessToken) => {
// 保存新的Access Token
saveAccessToken(newAccessToken);
// 重新发起原始请求
const originalRequest = error.config;
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
return axios(originalRequest);
});
} else {
// 跳转到登录页面
}
}
return Promise.reject(error);
}
);
通过上述实现,客户端可以在Access Token过期时,使用Refresh Token获取新的Access Token,从而实现了无感刷新Token的效果。