关于无感刷新的理解: 
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已经过期

刷新token的一些方案

  • 方案一:后端返回过期时间,前端判断token过期时间,去调用刷新token接口
    缺点:需要后端额外提供一个Token过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败。
  • 方案二:写个定时器,定时刷新Token接口
    缺点:浪费资源,消耗性能,不建议采用。
  • 方案三:在响应拦截器中拦截,判断Token 返回过期后,调用刷新token接口

有三种方案,这里我们采用第三种方案解决

思路:

模拟操作:1. 手动修改本地储存里的那个token(改错 模拟过期)2. 触发需要标明身份的接口(错误token携带给后台操作)3. 请求返回状态为401 ,进入错误响应拦截器代码解决401问题有感刷新:清除token ,强制跳转回登陆页面,有感知的重新登陆拿到新token替换到本地需要重新触发接口,感觉特别不好无感刷新操作以及流程:刷新token,使用登陆时候保存的refresh_token,调用另外一个接口,换回来新的token值 ,替换到本地,再次完成本次未完成的请求(用户无感知)1.登陆页面 localStorage.setItem('refresh_token', res.data.data.refresh_token 存入 refresh_token2.在响应拦截器中对401状态码引入刷新token的api方法调用3.替换保存本地新的token4.error错误对象里headers替换成新的token5.axios再次发起这次未完成的请求,返回promise对象到最开始发请求的逻辑页面6.如果refresh_token也过期了,那么就判断是否过期,过期了就清除localStorage所有值跳转回登陆页面

简易代码:

首先跟后端大哥沟通,让他在登陆接口中给我们返回正常的token和刷新的token,然后我们都存起来,然后让后端大哥写一个刷新token的接口

登陆时拿到的后端数据:

把登陆时拿到的后端数据存起来

然后再响应拦截器中判断状态码为401,代表身份过期,在这里进行无感刷新token

// 添加响应拦截器  本质:就是一个函数
axios.interceptors.response.use(function (response) {// http响应状态码为2xxx 3xxx就进入这里// 对响应数据做些什么return response
}, async function (error) {// http 响应状态码为4xx 5xx就会进入这里console.log('error', error)if (error.response.status === 401) { // 状态码为401 身份过期removeToken()// 清除token,才能让路由守卫判断// 使用refresh_token 换回新的token再继续使用 用户无感知//请求后端给的刷新token的接口const res = await refreshTokenAPI()// 1.拿到新的token更新token到本地localStorage.setItem('token', res.data.data.token)// error.config 就是上一次axios请求的配置对象// console.dir(error.config)// 2. 把新的token赋予到下一次axios请求的请求头中error.config.headers.Authorization = 'Bearer ' + res.data.data.token// 3.未完成这次请求,再一次发起请求// 结果我们要return回原本逻辑调用地方 返回一个promise对象return axios(error.config)// 如果刷新的refresh_token也过期了// 判断refresh_token的请求的状态,路径,请求方式} else if (error.response.status === 500 && error.config.url === 'refresh_token请求的路径' && error.config.method === 'put') {//  清除localStorage所有值localStorage.clear()// 跳到登陆页router.replace('/login')}return Promise.reject(error)
})

 以上是个人对开发中使用Token的一点总结,如有叙述不当之处请指正,我将及时改正并感谢!

Vue 无感刷新token相关推荐

  1. 使用Axios进行无感刷新Token

    前言 本人在开发项目时,在做登录模块时,参考了oauth2,在用户认证成功后会返回给前端一些令牌相关数据.接下来,再用进行接口请求时,前端根据令牌数据进行一系列的判断,然后做出最好的选择. 举个例子: ...

  2. 实现无感刷新token我是这样做的

    大家好,我是漫步,今天来分享一个登录常常遇到的难题,即登录超时时间与安全性的纠结问题. 原文: https://juejin.cn/post/6983582201690456071 前言 最近在做需求 ...

  3. Laravel6通过jwt(tymon/jwt-auth)实现API用户无感刷新TOKEN

    Laravel6通过jwt实现API用户无感刷新TOKEN 1.TOKEN是什么 2.jwt是什么 3.jwt安装&配置 3.1.通过composer安装 3.2.发布配置 3.3.生成加密密 ...

  4. 实现无感刷新 token 我是这样做的

    原文: https://juejin.cn/post/6983582201690456071 前言 最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁 ...

  5. 关于无感刷新Token,我是这样子做的

    本文正在参加「金石计划 . 瓜分6万现金大奖」 什么是JWT JWT是全称是JSON WEB TOKEN,是一个开放标准,用于将各方数据信息作为JSON格式进行对象传递,可以对数据进行可选的数字加密, ...

  6. token过期怎么办 无感刷新token

    (1)可以通过响应拦截器或者全局前置守卫强制跳转登录页 // 全局前置守卫 router.beforeEach((to, from) => {let token = sessionStorage ...

  7. uniapp 实现无感刷新token, 适应大多数项目

    不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通 本质上 都一样 我之前讲了一个是 在响应拦截哪里做token刷新 其实这样做还是不好的,因为这样我 ...

  8. Vue无感刷新当前页面

    使用 Vue 选项/组合 Api provide / inject Api 地址,此方法可以实现无感刷新并且不会出现闪烁的空白. 首先在根组件 App.vue 定义这个方法 <template& ...

  9. 无感刷新token方法

    通常,对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token.不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子,token过期后 ...

最新文章

  1. [高级]android应用开发之intent的妙用二
  2. 使用curl操作InfluxDB
  3. css --- [读书笔记] 盒模型(边框、内外边距)
  4. Latex中定理、引理、证明、假设、空白行
  5. 速收藏,《机器学习实战》Python3环境算法实现代码
  6. IT. IT-hyena成就自我
  7. 什么是9.png,如何制作,如何使用。
  8. duilib之源码分析
  9. 在Linux上使用Qt编译WebKit
  10. 《Java就业培训教程》_张孝祥_书内源码_02
  11. 防止sql拼接的Java方法_JAVA程序防止SQL注入的方法
  12. 主板 稳定测试软件,拷机必不可少 编辑推荐几款稳定性测试软件
  13. 读李尚龙《你只是看起来很努力》摘录的句子
  14. Linux apache 默认目录结构
  15. DPU网络开发SDK—DPDK(七)
  16. Wix安装包制作-个人总结
  17. 00-线段检测--FLD
  18. oracle导入多个dmp文件到一个用户,Oracle dmp文件导入(还原)到不同的表空间和不同的用户下...
  19. python爬取使用线程池出现报错:exception calling callback for #x3c;Future at 0x1e8e963ef70 state=finished raised
  20. 写在2018年岁末之际

热门文章

  1. I2C的总线电容 总线的最大电容 400pF限制
  2. HTML表单和媒体查询
  3. 最新MySQL运维高级课程 - 多位大牛轮番上阵倾力讲解 超多经典PDF 28天MySQL运维课程
  4. 网易笔试题之DFS回溯法求解黑白棋(翻翻棋)
  5. react 图片预览
  6. ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file 解决过程
  7. 【目标检测实战学习】从零开始制作并训练自己的VOC数据集,并使用Retinanet进行目标检测
  8. 戴尔外星人m16r1国行中文原厂Windows11系统自带Support Assist OS Recovery恢复出厂设置
  9. “限高令”下,再无500米以上高层建筑,为何禁止?
  10. 对接快递100快递管家API之订单取消接口