位置: 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)

  • 一个企业帐号下有多个域名,是否需要各自提交实名审核?

    一个企业帐号下有多个域名,是否需要各自提交实名审核?

  • 苹果11电信卡信号不好怎么回事(苹果11电信卡信号满格为什么数据用不了)

    苹果11电信卡信号不好怎么回事(苹果11电信卡信号满格为什么数据用不了)

  • mac风扇声音突然变大(mac风扇声音突然变大然后自动关机)

    mac风扇声音突然变大(mac风扇声音突然变大然后自动关机)

  • 银河爱奇艺会员电视上怎么用(银河爱奇艺会员可以2台电视用)

    银河爱奇艺会员电视上怎么用(银河爱奇艺会员可以2台电视用)

  • 小寻电话手表怎么绑定(小寻电话手表怎么下载软件)

    小寻电话手表怎么绑定(小寻电话手表怎么下载软件)

  • 电池有保质期吗(电动车电池有保质期吗)

    电池有保质期吗(电动车电池有保质期吗)

  • 拼单返现消失怎么办(拼单返现消失怎么找回)

    拼单返现消失怎么办(拼单返现消失怎么找回)

  • 笔记本电脑乘法键在哪(笔记本电脑乘法和除法是哪个按键)

    笔记本电脑乘法键在哪(笔记本电脑乘法和除法是哪个按键)

  • 三星手机无法启动怎么解决(三星手机无法启动三星钱包)

    三星手机无法启动怎么解决(三星手机无法启动三星钱包)

  • 苹果接电话可以录音吗(苹果接电话可以解锁吗)

    苹果接电话可以录音吗(苹果接电话可以解锁吗)

  • iphone锁屏后qq下线了(苹果手机锁屏之后qq还会在线吗)

    iphone锁屏后qq下线了(苹果手机锁屏之后qq还会在线吗)

  • 微信好友辅助发送了没反应(微信好友辅助发送什么)

    微信好友辅助发送了没反应(微信好友辅助发送什么)

  • 华为mate30pro首次充电要多久(华为mate30pro首次激活日期)

    华为mate30pro首次充电要多久(华为mate30pro首次激活日期)

  • ipadmini5用18w还是30w快充(ipadmini5能用18w充电器吗)

    ipadmini5用18w还是30w快充(ipadmini5能用18w充电器吗)

  • 小米电脑屏幕出现竖线修复(小米电脑屏幕出现一个框)

    小米电脑屏幕出现竖线修复(小米电脑屏幕出现一个框)

  • 手机信号edge怎么解决(手机信号edge怎么回事)

    手机信号edge怎么解决(手机信号edge怎么回事)

  • 怎么减掉视频的一部分(怎么减掉视频的后半截)

    怎么减掉视频的一部分(怎么减掉视频的后半截)

  • excel的特点(excel的特点和功能)

    excel的特点(excel的特点和功能)

  • 手机wps文件保存在哪里(手机WPS文件保存到手机)

    手机wps文件保存在哪里(手机WPS文件保存到手机)

  • 手机显示温度过低无法充电怎么办(手机显示温度过低是什么原因)

    手机显示温度过低无法充电怎么办(手机显示温度过低是什么原因)

  • 淘宝规则的适用者是(淘宝规则的适用范围)

    淘宝规则的适用者是(淘宝规则的适用范围)

  • 华为mate30pro怎么单手操作(华为mate30pro怎么样)

    华为mate30pro怎么单手操作(华为mate30pro怎么样)

  • 抖音用自己的流量看不了为什么(抖音自己的流量在哪里看)

    抖音用自己的流量看不了为什么(抖音自己的流量在哪里看)

  • iphone11有夜拍模式吗(iphone11夜拍模式)

    iphone11有夜拍模式吗(iphone11夜拍模式)

  • 嘀嗒出行车主邀请码在哪里(嘀嗒出行邀请车主)

    嘀嗒出行车主邀请码在哪里(嘀嗒出行邀请车主)

  • 华为荣耀9x指纹在哪(华为荣耀9x指纹设置不见了)

    华为荣耀9x指纹在哪(华为荣耀9x指纹设置不见了)

  • 微信丢了如何找回来(微信丢了如何找回原来的微信密码)

    微信丢了如何找回来(微信丢了如何找回原来的微信密码)

  • Python的监控功能示例(python监控模块)

    Python的监控功能示例(python监控模块)

  • c语言中使用指向结构指针的原因(c语言中使用指针的好处)

    c语言中使用指向结构指针的原因(c语言中使用指针的好处)

  • 个人卖给公司车需要什么手续
  • 个体工商户月销售额超10万怎么报税
  • 加计抵减不符合怎么办
  • 企业对企业分红要缴纳什么税免税分红
  • 财务人员培训费怎么入账
  • 计提固定资产折旧,车间使用的固定资产折旧1400
  • 先结转损益还是先结转本年利润
  • 数量金额式明细账模板
  • 指定会计科目是
  • 出口货物退运管理办法
  • 企业间借款增值税税率
  • 来料加工与进料加工的相似之处有
  • 赠送产品能直接用吗
  • 当期未开票过收入,以后开票怎么做会计分录
  • 民办非企业单位是什么单位性质
  • 长期股权变更
  • 公司的一些党员特别喜欢健身
  • 一般纳税人6个点和13点
  • 水利基金按含税还是不含税申报
  • 收购发票盖章盖谁的
  • 增值税小规模纳税人申报表填表说明
  • 冲红发票金额大怎么办
  • 结转实物发放的成本分录
  • 财产转移数据缴费怎么交
  • 事业单位打印费计入什么科目
  • 企业的银行存款日记账属于
  • windows11怎么显示桌面图标
  • win10升级win11报错
  • 增值税专用发票上注明的价款含税吗
  • 办理不动产证需要什么手续及证件
  • 经营租赁的房屋计提折旧吗
  • 支付投资款怎么做账
  • 注册资本增加了
  • 供应商自身的品质问题
  • 以前年度少计收入 会计怎么处理
  • 前端静态页面
  • 布拉塞龙图片
  • 个人纪录简称
  • 详解 HttpServletResponse
  • PHP new static 和 new self详解
  • 帝国cms做商城
  • 从在建工程调整到费用
  • 个体工商户如何用工
  • 有限合伙企业属于企业法人还是非法人企业
  • 建筑劳务单位
  • 现时社保缴费
  • 企业税预缴在哪里
  • 其他收益会计科目核算什么
  • 车辆使用费怎么算
  • 外商投资企业清算资金汇出环节,银行
  • 预提福利费
  • 摊销本月的广告费合理吗
  • 税控盘网上抄报税的步骤
  • sql server自动生成语句
  • java连接mysql数据库教程
  • sqlsever修改数据
  • mac怎么把视频设置成桌面
  • fedora iso
  • wpl是什么文件
  • 今后64位Win10 Mobile将是未来重点
  • 手机用xp系统
  • ulimit命令详解
  • linux管道与重定向
  • nmstt.exe - nmstt是什么进程 有什么用
  • win8的应用商店
  • opengl纹理采样
  • 微信小程序用户名怎么改名
  • jquery弹出页面
  • oracle shell脚本
  • unity脚本编写教程
  • python functools.wraps
  • meta-inf文件夹在哪
  • js获取当前时间
  • jQuery插件能输出到控制台
  • jquery控制元素的显示与隐藏
  • jquery图片轮播代码
  • 香皂需要换着用吗
  • 进口设备应缴纳的关税
  • 12366几点上班人工服务
  • 营业费用指哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设