位置: IT常识 - 正文

关于 Token 过期问题的两种解决方案(token过期处理)

编辑:rootadmin
关于 Token 过期问题的两种解决方案

推荐整理分享关于 Token 过期问题的两种解决方案(token过期处理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:token过期或者无效,token过期问题,token过期或者无效,token已过期3910013,如果token过期了,交给谁处理,如果token过期了,交给谁处理,关于token过期跳转登陆后如何还原之前的状态,token过期有什么影响,内容如对您有帮助,希望把文章链接给更多的朋友!

 对于token过期,我们有两种方案:

方案一:当我们操作某个需要token作为请求头的接口时,返回的数据错误error.response.status === 401,说明我们的token已经过期了。

我们希望当响应返回的数据是401身份过期时,让当前浏览页面强行跳转到登入页面,让用户手动更新token。拿到最新的token值后再跳回之前浏览的页面。增强用户体验。

实现原理:

再阻拦响应器中配置:

// 阻拦响应器request.interceptors.response.use(function (response) { return response}, async function (error) { if (error.response && error.response.status === 401) { // token续签方式1: //清空当前vuex保存的token(我们这的vuex和本地已经建立了关系,相当于也清空了本地token) store.commit('upUser', '') console.log(router.currentRoute.fullPath)// 当前路由的完整路径(#后面的) //这里我们采用?path=的方式保存当前浏览页面的完整路径, // push()会产生历史记录 而replace不会有历史记录 router.push({ path: `/login?path=${router.currentRoute.fullPath}` }) } return Promise.reject(error)})

再登入组件中给登入功能函数添加:

关于 Token 过期问题的两种解决方案(token过期处理)

 this.$router.replace({           path: this.$route.query.path || '/'         })

// 1.点击登入 async onSubmit () { try { const { data: res } = await loginAPI(this.user) //登录成功 // 不严谨的返回上次浏览的页面 // this.$router.back() // 推荐方式: // 登录后, 判断有未遂地址(有未遂地址的情况是:token过期,在阻拦响应器中实现对未遂地址的保存), 登入成功后跳转到未遂地址, 否则去/路径(跳到首页--这种情况是:用户主动前往登入页面的登入,没有未遂地址,登入成功后直接前往首页) // replace不会产生路由历史记录 this.$router.replace({ path: this.$route.query.path || '/' }) // 存储获取过来的token this.$store.commit('upUser', res.data) } catch (err) { console.log(err) if (err.response.status === 400) { this.$toast.fail('手机号或验证码错误') } else { this.$toast.fail('登入失败,请稍后再试') // 可能由于网络问题导致的登入失败 } } },

方案二:实现用户无感知的刷新token值,我们希望当响应返回的数据是401身份过期时,响应阻拦器自动帮我们刷新token值,而不是让用户手动更新token。拿到最新的token值后再重新发起刚刚因token过期的请求。从而实现无感知

前提是有后台的配合:

登入后后台接口返回值要求:必须提供刷新token的令牌

并且后台提供了刷新token的接口: (请求头要求是refresh_token)

注意:1. 在请求响应器中做判断在非刷新token的时候,给请求头配置token,而刷新token的时候,我们自己手动添加请求头为refresh_token

2.refresh_token也有过期的时候,这时只能强行让用户自己重新登入了

// 刷新用户tokenexport const updataTokenAPI = function () { return request({ method: 'PUT', url: '/v1_0/authorizations', headers: { Authorization: `Bearer ${store.state.user.refresh_token}` } })}

实现原理: 

import request from '@/utils/request'import store from '@/store'// 请求响应器request.interceptors.request.use(function (config) { // config :本次请求的配置对象 // config 里面有一个属性:headers const { user } = store.state//请求头未配置信息的时候才会配置 if (user.token && config.headers.Authorizatio === undefined) { config.headers.Authorization = `Bearer ${user.token}` } // 这里必须将config返回出去,否则请求会停在这 里 return config}, function (error) { // 如果请求出错(还没发送出去,可能是代码写错了的问题),就会进入这里 return Promise.reject(error)})// 阻拦响应器request.interceptors.response.use(function (response) { return response}, async function (error) { if (error.response && error.response.status === 401) { // token续签方式2: refreshToken(用户无感知) // 将过期的token值清空 store.commit('updataToken', '') //请求刷新token接口 const { data: res } = await updataTokenAPI() //保存新的token值 store.commit('updataToken', res.data.token) // 再调用一次未完成的请求啊(用户无感知) // error.config 就是上一次axios请求的配置对象 // console.dir(error.config) // 把新的token赋予到下一次axios请求的请求头中 error.config.headers.Authorization = 'Bearer ' + res.data.token // return到await的地方,将未完成的请求再次发起, return axios(error.config) } else if (error.response.status === 500 && error.config.url === '/v1_0/authorizations') { // 因为500的情况有很多种,refresh_token失效也是其中一种情况,所有再加上error.config.url === '/v1_0/authorizations'条件,确保是refresh_token失效情况 // 清空所有的token和refresh_toekn,并且强制跳转登录页面 store.commit('upUser', {}) router.push({ path: '/login' }) Toast.fail('身份已过期') } return Promise.reject(error)})

 

本文链接地址:https://www.jiuchutong.com/zhishi/288080.html 转载请保留说明!

上一篇:Element-UI--<el-switch>的@change回调函数的参数用法

下一篇:Escarpment Trail in Porcupine Mountains Wilderness State Park, Michigan (© Pat & Chuck Blackley/Alamy)

  • 苹果13怎么设置铃声(苹果13怎么设置动态壁纸)

    苹果13怎么设置铃声(苹果13怎么设置动态壁纸)

  • 红米note11pro是骁龙870吗

    红米note11pro是骁龙870吗

  • 华为荣耀9xpro电池多大(荣耀9xpro更换电池)

    华为荣耀9xpro电池多大(荣耀9xpro更换电池)

  • 微信在新手机登录以前的聊天记录可以恢复吗(微信在新手机登录了 旧手机还能登录吗)

    微信在新手机登录以前的聊天记录可以恢复吗(微信在新手机登录了 旧手机还能登录吗)

  • 支付宝充话费显示备货中(支付宝充话费显示交易关闭是什么意思)

    支付宝充话费显示备货中(支付宝充话费显示交易关闭是什么意思)

  • 用网名能查到微信号(知道微信网名能不能查到微信号)

    用网名能查到微信号(知道微信网名能不能查到微信号)

  • 抖音看相关功能(抖音相关功能介绍)

    抖音看相关功能(抖音相关功能介绍)

  • 微信电脑和手机能同时视频么(微信电脑和手机信息不同步怎么办)

    微信电脑和手机能同时视频么(微信电脑和手机信息不同步怎么办)

  • 抖音小店商品审核要多久(抖音小店商品审核未通过怎样重新上传)

    抖音小店商品审核要多久(抖音小店商品审核未通过怎样重新上传)

  • 电压过高怎么处理(电压过高怎么处理好)

    电压过高怎么处理(电压过高怎么处理好)

  • t-ui无响应怎么解决(tmclient无响应)

    t-ui无响应怎么解决(tmclient无响应)

  • 电脑远程连接不上怎么回事(电脑远程连接不上)

    电脑远程连接不上怎么回事(电脑远程连接不上)

  • 红米k30pro发布时间是(红米k30pro发布时间)

    红米k30pro发布时间是(红米k30pro发布时间)

  • 新版微信如何退出手机绑定(新版微信如何退出登录)

    新版微信如何退出手机绑定(新版微信如何退出登录)

  • iphone11中国发售时间(iphone 11 发售价)

    iphone11中国发售时间(iphone 11 发售价)

  • designed by 0pp0是什么型号手机

    designed by 0pp0是什么型号手机

  • id和ip有什么区别(id和pid的区别)

    id和ip有什么区别(id和pid的区别)

  • 苹果手表可以测深度睡眠吗(苹果手表可以测体温吗)

    苹果手表可以测深度睡眠吗(苹果手表可以测体温吗)

  • 触宝电话如何设置方法(触宝电话如何设置密码)

    触宝电话如何设置方法(触宝电话如何设置密码)

  • win10电脑记事本乱码怎么办(win10电脑记事本在哪)

    win10电脑记事本乱码怎么办(win10电脑记事本在哪)

  • 内斯特角灯塔上空的银河 ,苏格兰斯凯岛 (© Shaiith/Getty Images)(内斯塔特点)

    内斯特角灯塔上空的银河 ,苏格兰斯凯岛 (© Shaiith/Getty Images)(内斯塔特点)

  • 【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿,参与评论,即可有机获得(tf fans club)

    【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿,参与评论,即可有机获得(tf fans club)

  • javaScript实现倒计时功能(js倒数)

    javaScript实现倒计时功能(js倒数)

  • 劳务外包人员在本公司可报销吗
  • 以前年度损益调整属于哪类科目
  • 承兑可以要吗
  • 水电费专用发票税率
  • 现金股利和现金利润的区别
  • 上市审计费入账
  • 清产核资与清算的关系
  • 外购动力的分录
  • 股票属于现金及股票吗
  • 2018劳务费个人所得税税率表
  • 税控盘抵税申报表如何撤销
  • 销售软件产品
  • 定期定额个体工商户个人所得税
  • 增加实收资本印花税税目
  • 企业收到进项发票
  • 企业的其他业务收入有
  • 资产处置损益计入利润吗
  • 取得高新技术企业
  • 公司名下商品房卖给个人后房产税怎么交
  • profiler.exe - profiler是什么进程 有什么用
  • 谨慎性原则的具体体现有哪些
  • 企业与企业之间借款账务如何处理
  • 数字证书认证系统
  • 帝国cms移动端
  • 预缴企业所得税怎么做账务处理
  • 小米路由器青春版r1cl参数
  • 增值税发票与实际差异五毛钱
  • vue全家桶插件有哪些
  • 不发放工资怎么办
  • php培训得花多少钱
  • k8s安装步骤
  • vue3响应式对象数组
  • 未达到起征点的增值税怎么填写
  • 劳务报酬什么情况下可以退税
  • 年度结转增值税
  • 大气污染物排放2020标准
  • SQLite数据库常用语句及MAC上的SQLite可视化工具MeasSQLlite使用方法
  • 哪些情况可以开立基本账户
  • sqlserver的isnull
  • 财务报表没报会影响出口退税吗为什么
  • 绩效工资扣款违法么?
  • 个人所得税手续费返还增值税申报表怎么填
  • 预付账款的会计编码是多少?
  • 社保怎么进行账户转移
  • 企业分配利润的原因
  • 辅导期一般纳税人什么意思
  • 现金支票存根联丢失怎么办
  • 收据能开发票吗
  • 如何理解会计中的借贷? 知乎
  • 股东分红需要
  • 社保基数在哪里申报
  • 普通发票作废如何操作
  • 有没有月初发放当月工资的
  • 政府部门有税务和审计审查吗
  • 项目期间费用包括哪些费用
  • 企业预付账款是什么意思
  • VMware虚拟机中安装MATE桌面环境
  • solaris的vi编辑
  • win10预览版21277
  • ubuntu唤醒快捷键
  • XP下HTTP的403.9错误-禁止访问:连接的用户过多 重启iis可以解决
  • mac如何预览字体大小
  • hpl是什么文件
  • windows10的开始菜单
  • win7系统关闭自动休眠
  • alt用不了
  • 获取jquery对象
  • shell数组遍历
  • javascript还有人用吗
  • python中怎么取整数的某位数
  • js鼠标滑动特效
  • jquery实现图片横向移动
  • 税务稽查案件办案程序规定
  • 江苏叉车考试
  • 税务罚款会影响宝宝当公务员不
  • 管道运输是什么意思?运输的是什么
  • 有限合伙企业怎么交税
  • 四季度预缴申报表
  • 契税的征收机关是哪里
  • 西安市乱占耕地建房
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设