关于无感刷新的理解: 
实现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. 图片垂直居中的使用技巧
  2. ad18修改过孔和走线间距_Altium Designer设计PCB--如何设置铺铜与导线或过孔的间距...
  3. 将派生类指针赋值给基类的指针
  4. Android7.0 PowerManagerService(2) WakeLock的使用及流程
  5. 2. SVM线性分类器
  6. 利用DataSet、DataTable、DataView按照自定义条件过滤数据
  7. linux 一个读写锁的使用异常导致的故障
  8. 开源字体lato fonts
  9. 华为手机隐藏app图标_3秒钟轻松隐藏华为手机桌面图标!不需要下载安装第三方软件哦!...
  10. vue创建项目卡住不动,vue create project卡住不动 解决办法
  11. 把视频文件放在服务器上,生成链接供外部访问
  12. ArcGIS制图中参考比例尺
  13. 有趣的数据结构——Linux内核中的链表(Black Aureole)
  14. matlab采样率为100hz,matlab自己设计一个低通滤波器,要求滤出100Hz之外的频率,采样率为10000Hz...
  15. 华为WeAutomate RPA产品首席规划师周为:企业数智化转型之路,RPA共创新价值
  16. 教师计算机提升工程培训心得,教师信息技术应用能力提升培训心得体会3篇
  17. 小孔成像总结_初中物理150条知识点总结,非常珍贵!
  18. 超链接 番茄札记 html,番茄学习法笔记以及初始尝试
  19. latex:公式的序号
  20. 有没有适合男的下班以后做的副业?

热门文章

  1. vue3中 setup注意点
  2. vim退出快捷键_VIM 常用快捷键
  3. 06.Logistic回归与最大熵模型(学习笔记)
  4. ILRuntime Unity热更新
  5. 现在大家都在用的钢琴键盘模拟器好用吗?
  6. 基于MATLAB的LDL分解法
  7. PyScript:让Python在HTML中运行
  8. 关于微信H5高德iOS定位失败的解决办法
  9. 无子女无遗嘱,去世后名下房产该归谁
  10. 【Ominigraffle】纸张版面调整成A4大小