好的html5网站,大连谷歌seo,wordpress页面重定向循环,phpmysql网站开发技术后端配置
设置Token过期时间#xff1a;在后端#xff08;如服务器或网关#xff09;配置access_token和refresh_token的过期时间。通常#xff0c;access_token的过期时间较短#xff0c;而refresh_token的过期时间较长。提供刷新Token接口#xff1a;后端需要提供一个…后端配置
设置Token过期时间在后端如服务器或网关配置access_token和refresh_token的过期时间。通常access_token的过期时间较短而refresh_token的过期时间较长。提供刷新Token接口后端需要提供一个接口用于接收前端发送的refresh_token并返回新的access_token和refresh_token 前端实现
1. 安装Axios首先确保在Vue项目中安装了Axios库用于发送HTTP请求。
npm install axios
2. 创建Axios实例在Vue项目中创建一个Axios实例并配置基础URL等参数。
import axios from axios;const instance axios.create({baseURL: /api, // 后端接口的基础URLtimeout: 10000, // 请求超时时间
}); 3. 添加请求拦截器在Axios实例中添加请求拦截器用于在每次请求前判断是否需要添加token。
instance.interceptors.request.use(config {const accessToken localStorage.getItem(access_token); // 从本地存储中获取access_tokenif (accessToken) {config.headers.Authorization Bearer ${accessToken}; // 设置请求头中的Authorization字段}return config;},error {return Promise.reject(error);}
);
4. 添加响应拦截器在Axios实例中添加响应拦截器用于处理后端返回的响应数据。当access_token过期时通常返回401状态码自动使用refresh_token刷新access_token并重新发送原始请求。
let isRefreshing false; // 标记是否正在刷新token
let pendingRequests []; // 存储待重发的请求instance.interceptors.response.use(async response {if (response.data response.data.code 401) {// access_token过期尝试使用refresh_token刷新if (!isRefreshing) {isRefreshing true;try {const refreshToken localStorage.getItem(refresh_token); // 从本地存储中获取refresh_tokenconst res await axios.post(/api/refresh-token, { refresh_token: refreshToken }); // 发送刷新token请求const newAccessToken res.data.access_token; // 获取新的access_tokenlocalStorage.setItem(access_token, newAccessToken); // 存储新的access_token到本地存储// 重发待重发的请求pendingRequests.forEach(({ config, resolve }) {config.headers.Authorization Bearer ${newAccessToken}; // 更新请求头中的Authorization字段resolve(instance(config)); // 重新发送请求});pendingRequests []; // 清空待重发的请求队列} catch (error) {// 刷新token失败处理错误如跳转到登录页面console.error(Failed to refresh token, error);// 根据项目需求可能需要进行其他错误处理如清除本地存储、重置路由等} finally {isRefreshing false; // 无论成功还是失败都标记为不再刷新token}// 注意由于此时已经刷新了token并重发了请求因此不需要再返回原始的401响应给调用者// 可以选择返回一个特定的响应或者抛出一个错误根据实际需求决定return Promise.reject(new Error(Token refreshed and request retried));} else {// 如果已经在刷新token则将当前请求加入待重发的请求队列return new Promise((resolve) {pendingRequests.push({ config, resolve });});}}return response;},error {return Promise.reject(error);}
); 5. 使用Axios实例发送请求在Vue组件或Vuex等地方使用创建的Axios实例发送请求即可实现token的无感刷新。
// 在Vue组件中发送请求
instance.get(/api/some-endpoint).then(response {// 处理响应数据console.log(response.data);}).catch(error {// 处理请求错误如网络错误、服务器错误等console.error(Request error, error);});
通过以上步骤您就可以在Vue 2项目中实现token的无感刷新了。请注意这只是一个基本的实现示例具体实现可能需要根据项目的实际需求进行调整和优化。
