新塘网站建设,中国网络营销公司,微信app下载安装官方版2021,微信怎么链接wordpress线上平台有时会出现用户正在使用的时候#xff0c;突然要用户去进行登录#xff0c;这样会造成很不好的用户体验#xff0c;但是当时一直没有好的思路因此搁置了下来#xff1b;通过零散时间查询资料以及思考#xff0c;最终解决了这个问题#xff0c;接下来跟大家分享一…线上平台有时会出现用户正在使用的时候突然要用户去进行登录这样会造成很不好的用户体验但是当时一直没有好的思路因此搁置了下来通过零散时间查询资料以及思考最终解决了这个问题接下来跟大家分享一下
环境 请求采用的 Axios V1.3.2。 平台的采用的 JWT(JSON Web Tokens) 进行用户登录鉴权。 拓展JWT 是一种认证机制让后台知道该请求是来自于受信的客户端更详细的可以自行查询相关资料
问题现象
线上用户在使用的时候偶尔会出现突然跳转到登录页面需要重新登录的现象。
原因 突然跳转到登录页面是由于当前的 token 过期导致请求失败在 axios 的响应拦截axiosInstance.interceptors.response.use中处理失败请求返回的状态码 401此时得知token失效因此跳转到登录页面让用户重新进行登录。 平台目前的逻辑是在 token 未过期内用户登录平台可直接进入首页无需进行登录操作因此就存在该现象用户打开平台由于此时 token 未过期用户直接进入到了首页进行其他操作。但是在用户操作的过程中token 突然失效了此时就会出现突然跳转到登录页面严重影响用户的体验感注目前线上项目中存在数据大屏一些实时数据的显示因此存在用户长时间停留在大屏页面不进行操作查看实时数据的情况
切入点 怎样及时的、在用户感知不到的情况下更新token 当 token 失效的情况下出错的请求可能不仅只有一个当失效的 token 更新后怎样将多个失败的请求重新发送
操作流程
好了经过了一番分析后我们找到了问题的所在并且确定了切入点那么接下来让我们实操将问题解决掉。 我们仅从前端的角度去处理。 后端提供了两个重要的参数accessToken用于请求头中进行鉴权存在有效期refreshToken刷新令牌用于更新过期的 accessToken相对于 accessToken 而言它的有效期更长。
1、处理 axios 响应拦截
注在我实际的项目中accessToken 过期后端返回的 statusCode 值为 401需要在axiosInstance.interceptors.response.use 的 error回调中进行逻辑处理。
// 响应拦截
axiosInstance.interceptors.response.use((response) {return response;},(error) {let {data, config} error.response;return new Promise((resolve, reject) {/*** 判断当前请求失败* 是否由 toekn 失效导致的*/if (data.statusCode 401) {/*** refreshToken 为封装的有关更新 token 的相关操作*/refreshToken(() {resolve(axiosInstance(config));});} else {reject(error.response);}})}
)我们通过判断statusCode来确定是否当前请求失败是由token过期导致的 使用 Promise 处理将失败的请求将由于 token 过期导致的失败请求存储起来存储的是请求回调函数resolve 状态。
理由后续我们更新了 token 后可以将存储的失败请求重新发起以此来达到用户无感的体验
补充
现象在我过了几天登录平台的时候发现refreshToken过期了但是没有跳转到登录界面 原因 当 refreshToken 过期失效后后端返回的状态码也是 401 发起的更新token的请求采用的也是处理后的axios因此响应失败的拦截对更新请求同样适用。
问题
这样会造成当 refreshToken 过期后会出现停留在首页无法跳转到登录页面。 解决方法
针对这种现象我们需要完善一下axios中响应拦截的逻辑。
axiosInstance.interceptors.response.use((response) {return response;},(error) {let {data, config} error.response;return new Promise((resolve, reject) {/*** 判断当前请求失败* 是否由 toekn 失效导致的*/if (data.statusCode 401 config.url ! /api/token/refreshToken) {refreshToken(() {resolve(axiosInstance(config));});} else if (data.statusCode 401 config.url /api/token/refreshToken) {/*** 后端 更新 refreshToken 失效后* 返回的状态码 401*/window.location.href ${HOME_PAGE}/login;} else {reject(error.response);}})}
)2、封装 refreshToken 逻辑 存储由于token过期导致的失败的请求。 更新本地以及 axios 中头部的token。 当 refreshToken 刷新令牌也过期后让用户重新登录。
// 存储由于 token 过期导致 失败的请求
let expiredRequestArr: any[] [];/*** 存储当前因为 token 失效导致发送失败的请求*/
const saveErrorRequest (expiredRequest: () any) {expiredRequestArr.push(expiredRequest);
}// 避免频繁发送更新
let firstRequre true;
/*** 利用 refreshToken 更新当前使用的 token*/
const updateTokenByRefreshToken () {firstRequre false;axiosInstance.post(更新 token 的请求,).then(res {let {refreshToken, accessToken} res.data;// 更新本地的tokenlocalStorage.setItem(accessToken, accessToken);// 更新请求头中的 tokensetAxiosHeader(accessToken);localStorage.setItem(refreshToken, refreshToken);/*** 当获取了最新的 refreshToken, accessToken 后* 重新发起之前失败的请求*/expiredRequestArr.forEach(request {request();})expiredRequestArr [];}).catch(err {console.log(刷新 token 失败err, err);/*** 此时 refreshToken 也已经失效了* 返回登录页让用户重新进行登录操作*/window.location.href ${HOME_PAGE}/login;})
}/*** 更新当前已过期的 token* param expiredRequest 回调函数返回由token过期导致失败的请求*/
export const refreshToken (expiredRequest: () any) {saveErrorRequest(expiredRequest);if (firstRequre) {updateTokenByRefreshToken();}
}总结
经过一波分析以及操作我们最终实现了实际项目中的无感刷新token最主要的是有效避免了用户在平台操作过程中突然要退出登录的现象尤其是当用户进行信息填写突然要重新登录之前填写的信息全部作废是很容易让人发狂的。
