网监大队让网站备案,口碑营销有哪些方式,中国电子商务官网,江苏省建设教育协会网站首页前端实现无感刷新
需要这么做的原因
在使用过程中#xff0c;如果token过期#xff0c;再操作页面可能就需要重新返回登录页获取token了#xff0c;在持续使用的过程中可能会出现多次跳去登录页的情况#xff0c;用户体验很不好。所以需要做无感刷新
做token无感刷新的方…前端实现无感刷新
需要这么做的原因
在使用过程中如果token过期再操作页面可能就需要重新返回登录页获取token了在持续使用的过程中可能会出现多次跳去登录页的情况用户体验很不好。所以需要做无感刷新
做token无感刷新的方式
使用双tokenaccess_token权限token和refresh_token用于获取新token的刷新token 方式一在响应器中拦截判断access_token返回过期后调用refresh_token的接口获取新token覆盖原access_token 方式二后端返回access_token时间让前端判断是否过期如果过期则调用refresh_token的接口刷新token 方式三通过定时器定时刷新access_token 通常是采用方式一去实现 弊端方式二需要后端额外返回access_token过期时间字段而且如果前端电脑本地时间被篡改则无法正确判断access_token是否过期。方式三使用定时器会增加页面的开销影响性能
实现流程
1、登录后返回两个token分别为权限access_token和refresh_token 2、在响应拦截器中对返回401无权限状态码时通过refresh_token调用token刷新接口 3、替换本地已过期的access_token 4、把刚刚失败的请求(返回的错误对象)中的access_token替换掉 5、再次发送刚刚未能完成的请求。 注如果refresh_token也过期了那么则需要清除掉所有tokenaccess_token和refresh_token返回登录页登录。在刷新access_token的同时最好也能刷新refresh_token比如refresh_token设置过期为7天刷新一次access_token后把refresh_token又往后续了7天。这也是为什么很多软件登录后几乎不用再登录的原因。 提示在刷新access_token的时候建议设置一个标识变量用于标识access_token是否已经刷新了毕竟过期时发起的请求可能有多条响应拦截后没必要重复刷新access_token而且重复刷新acces_token可能会报错因为最先执行完的刷新请求已经将refresh_token 更新了而后面执行的刷新请求还是使用旧的refresh_token
避免重复刷新的示例
let isRefreshing false; // 是否刷新中
let promiseRe;
export function refreshToken() {if(isRefreshing) { // 正在刷新中return promiseRe}isRefreshing true; // 第一个触发刷新的将标识置truepromiseRe request({ // 第一个刷新返回一个promise后续有同时期提起刷新的依旧直接对请求返回此promise避免重复发起请求url: /refreshToken,methods: post,data: { refreshToken: refresh_token}}).finally(() {isFreshing false; // 请求执行完毕后无论成功与否都将标识置false避免后续提起刷新时直接进if中无法正常刷新token})return promiseRe
}
