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

  • 论坛发帖推广技巧(论坛推广的操作方法)

    论坛发帖推广技巧(论坛推广的操作方法)

  • 红米note11怎么录屏(红米note11怎么录音)

    红米note11怎么录屏(红米note11怎么录音)

  • iphone13有哪些亮点(苹果13有什么新亮点)

    iphone13有哪些亮点(苹果13有什么新亮点)

  • 华为手机充电一闪一灭的(华为手机充电一会儿断了)

    华为手机充电一闪一灭的(华为手机充电一会儿断了)

  • 抖音剪映为什么要付费(抖音剪映为什么选出的音乐方那么长)

    抖音剪映为什么要付费(抖音剪映为什么选出的音乐方那么长)

  • ipad时间限额怎么取消(ipad时间限额怎么设置不能忽略)

    ipad时间限额怎么取消(ipad时间限额怎么设置不能忽略)

  • 两张电信卡为什么一张无服务(两张电信卡为什么卡2无服务)

    两张电信卡为什么一张无服务(两张电信卡为什么卡2无服务)

  • 银河奇异果可以几个电视登录(银河奇异果可以投屏吗)

    银河奇异果可以几个电视登录(银河奇异果可以投屏吗)

  • sata hdd是什么意思(sata hdd规格)

    sata hdd是什么意思(sata hdd规格)

  • 华为电脑pin码是什么(华为电脑pin码是什么初始密码)

    华为电脑pin码是什么(华为电脑pin码是什么初始密码)

  • vivo手机怎么关闭锁屏杂志(vivo手机怎么关闭hd高清通话)

    vivo手机怎么关闭锁屏杂志(vivo手机怎么关闭hd高清通话)

  • 微信能在电视上登录吗(微信在电视上怎么登陆)

    微信能在电视上登录吗(微信在电视上怎么登陆)

  • 锂电池过充会怎样(锂电池过充会怎么办)

    锂电池过充会怎样(锂电池过充会怎么办)

  • 高斯投影的投影方式是(高斯投影的投影分类包含)

    高斯投影的投影方式是(高斯投影的投影分类包含)

  • 怎么设置拒接陌生电话(怎么设置拒接陌生人电话)

    怎么设置拒接陌生电话(怎么设置拒接陌生人电话)

  • 华为鸿蒙发布会时间(华为鸿蒙发布会图文)

    华为鸿蒙发布会时间(华为鸿蒙发布会图文)

  • 红米note8怎么设置微信指纹支付(红米note8怎么设置禁止下载软件)

    红米note8怎么设置微信指纹支付(红米note8怎么设置禁止下载软件)

  • xp系统桌面任务栏变宽

    xp系统桌面任务栏变宽

  • 苹果6支持nfc公交卡吗(iphone6p支持nfc)

    苹果6支持nfc公交卡吗(iphone6p支持nfc)

  • 抖音消息页关注是什么意思(抖音好友通过消息页关注)

    抖音消息页关注是什么意思(抖音好友通过消息页关注)

  • 华为荣耀20s耳机插孔在哪(华为荣耀20s耳机和充电是一个孔吗)

    华为荣耀20s耳机插孔在哪(华为荣耀20s耳机和充电是一个孔吗)

  • iphonexr怎么开nfc(iphonexr怎么开120帧)

    iphonexr怎么开nfc(iphonexr怎么开120帧)

  • 三星g9650是国行吗(三星g965n是什么版本)

    三星g9650是国行吗(三星g965n是什么版本)

  • 苹果酷狗有桌面歌词吗(苹果酷狗桌面歌词)

    苹果酷狗有桌面歌词吗(苹果酷狗桌面歌词)

  • 删除的通话记录怎么恢复(删除的通话记录在营业厅能查到吗?)

    删除的通话记录怎么恢复(删除的通话记录在营业厅能查到吗?)

  • PHPCMS手机站怎么建站?(phpcms怎么用)

    PHPCMS手机站怎么建站?(phpcms怎么用)

  • 城镇土地使用税暂行条例
  • 记账更改的方法
  • 小规模纳税人附加税减免政策2023
  • 当月开的票必须当月交税吗
  • 单利率和复利率excel计算公式
  • 失业保险稳岗返还是政府补助吗
  • 税盘服务费抵税怎么做分录
  • 销售收入的暂估入账是否结转利润
  • 公司装修费可以计入开办费吗
  • 工程施工企业的账务处理
  • 车辆购置税计税依据包括消费税吗
  • 地方教育费附加计入什么科目
  • 预缴所得税如何做账
  • 小规模纳税人季度多少免税
  • 哪几种跨省邮寄发票是违法的?
  • 资产处置损益和营业外收支的区别和联系
  • 服装具有什么性
  • 代开普通发票要什么材料?
  • 企业所得税纳税标准
  • 会计科目按经济类型分类
  • 营业外收入的账户结构
  • macOS Big Sur 11.3 公开测试版正式推送(附更新内容)
  • 招标单位收取标书费多少钱
  • 其他业务收入属于收入吗
  • 目标检测如何入门
  • 促销品的账务处理按售价算吗
  • thinkphp5.0框架
  • php操作mysql数据库
  • thinkphp框架入门
  • ahs日志
  • 国税代开专票缴纳城建税分录
  • java枚举写法
  • 企业所得税纳税人包括哪些类型
  • 可行性研究报告合同属于什么合同
  • 金银首饰包装物消费税
  • 开启php
  • 前端必学
  • python中删除字典里的空项目
  • php屏蔽ip
  • ubuntu 14.04 安装分区教程
  • 会议费可以开餐费吗
  • 小规模差额征税的账务处理
  • SQL SERVER 2008 CTE生成结点的FullPath
  • 一般纳税人商品暂估按销售的数量可以暂估成本吗
  • 资产负债表应收账款期末余额公式
  • 应交税费科目的核算内容
  • 实际出资大于注册资金
  • 营改增会计分录怎么做
  • 信息技术服务费属于什么费用
  • 生产成本的会计科目分录
  • 社保退回的钱怎么做会计分录
  • 公司为员工租房应注意
  • mysql单表10亿
  • 自增字段必须是主键吗
  • sql分几类
  • WINDOWS体验指数5.1
  • win7系统无法运行红警游戏
  • ubuntu支持软件
  • 如何制作ubuntu系统盘
  • ubuntu系统中安装微信步骤
  • centos安装后配置
  • 开启linux系统路由转发功能的语句
  • 电脑任务栏中没有网络图标
  • linux 用处
  • centos如何配置ip
  • win8.1技巧
  • mongoose怎么用
  • cocoscreator动画
  • unity3ds
  • 遮罩层出现后怎么点击其他地方隐藏
  • perl编程
  • opengl glbegin
  • js 函数写法
  • js扩展名是什么文件
  • 如何使用jquery设置一个属性值
  • EasyUI Pagination 分页的两种做法小结
  • android存储方式
  • 税务开票系统对账流程
  • 城市维护建设税税基是什么
  • 发票多久作废不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设