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

  • 如何设置电脑屏幕休眠时间(如何设置电脑屏幕亮度)

    如何设置电脑屏幕休眠时间(如何设置电脑屏幕亮度)

  • 微信接收的文件在哪个文件夹(微信接收的文件怎么删除)

    微信接收的文件在哪个文件夹(微信接收的文件怎么删除)

  • 和留言是什么业务(和留言是什么业务怎么取消)

    和留言是什么业务(和留言是什么业务怎么取消)

  • 华为网络显示hd怎么关闭(华为网络显示2g怎么调成4g)

    华为网络显示hd怎么关闭(华为网络显示2g怎么调成4g)

  • 为什么快手识别字幕失败(为什么快手识别不出来)

    为什么快手识别字幕失败(为什么快手识别不出来)

  • 点开别人的微信为什么没有朋友圈(点开别人的微信却看不到朋友圈入口)

    点开别人的微信为什么没有朋友圈(点开别人的微信却看不到朋友圈入口)

  • qq邮件怎么发到微信上(qq邮件怎么发到别人的邮箱里去手机)

    qq邮件怎么发到微信上(qq邮件怎么发到别人的邮箱里去手机)

  • 屏幕黑了怎么亮起来(如果屏幕黑了怎么办)

    屏幕黑了怎么亮起来(如果屏幕黑了怎么办)

  • 华为nova7支持wifi6吗(华为nova7支持红外遥控吗)

    华为nova7支持wifi6吗(华为nova7支持红外遥控吗)

  • 打印机主机名指的是什么(打印机主机名称是什么)

    打印机主机名指的是什么(打印机主机名称是什么)

  • 闲鱼能卖出去东西吗(闲鱼卖出去东西钱直接到支付宝吗)

    闲鱼能卖出去东西吗(闲鱼卖出去东西钱直接到支付宝吗)

  • 怎么裁剪图片中不要的部分(怎么裁剪图片中间部分)

    怎么裁剪图片中不要的部分(怎么裁剪图片中间部分)

  • 大王卡斗鱼免流量吗(大王卡斗鱼免流量吗?)

    大王卡斗鱼免流量吗(大王卡斗鱼免流量吗?)

  • 怎么在表格贴电子照片(电子表格怎么粘贴图片)

    怎么在表格贴电子照片(电子表格怎么粘贴图片)

  • word表格画线怎么画(word表格画线怎么能画线)

    word表格画线怎么画(word表格画线怎么能画线)

  • 通常所说的微机主机是指(通常所说的微机计算机的主机主要包括)

    通常所说的微机主机是指(通常所说的微机计算机的主机主要包括)

  • 极米和小米是一家吗(极米和小米有什么关系)

    极米和小米是一家吗(极米和小米有什么关系)

  • sp和ssp是什么意思(sp和ssp的区别)

    sp和ssp是什么意思(sp和ssp的区别)

  • 苹果手机尚未接入互联网是什么意思(苹果手机从哪里看本机号码)

    苹果手机尚未接入互联网是什么意思(苹果手机从哪里看本机号码)

  • 淘宝盗图怎么投诉处理(淘宝盗图在哪里举报)

    淘宝盗图怎么投诉处理(淘宝盗图在哪里举报)

  • iphone8plus使用攻略(苹果8plus使用攻略图解)

    iphone8plus使用攻略(苹果8plus使用攻略图解)

  • 桌面的文件怎么发QQ邮箱(桌面的文件怎么隐藏起来)

    桌面的文件怎么发QQ邮箱(桌面的文件怎么隐藏起来)

  • gta5打电话拨号(gta5打电话拨号怎么弄)

    gta5打电话拨号(gta5打电话拨号怎么弄)

  • 手机迅雷无法投屏原因(手机迅雷无法投屏电视)

    手机迅雷无法投屏原因(手机迅雷无法投屏电视)

  • 预收款增值税纳税义务发生时间与确认收入时间
  • 何为金税四期
  • 自然人扣缴系统初次登录怎么设置密码
  • 其他权益投资公允价值变动怎么计量
  • 与收益相关的政府补助会计分录总额法
  • 收到赠品入库需要用什么记录
  • 企业所得税可以税前扣除的税有哪些
  • 雇佣退休人员工伤赔偿标准
  • 未加盖发票专用章的发票是不合规
  • 购货无法取得发票财务如何处理
  • 一次性收到跨期租赁费会计分录
  • 咨询服务费是否可以税前扣除
  • 空调减值损失属于什么科目?
  • 返聘人员工伤可以申请工伤鉴定吗
  • 物业公司收取水费如何开具发票
  • 购物发票的税是由谁承担
  • 非学历教育培训费发票
  • 佣金发票可以抵扣吗
  • 向关联企业支付管理费用可以税前扣除吗
  • 进口商品买卖的关键环节
  • 有合同未收到租金税务如何处理?
  • 存货跌价准备可以转回吗?
  • windows11怎么添加桌面图标
  • 无形资产入股注意事项
  • 公司购买一辆车
  • 上年度的费用今年怎么算
  • linux minor
  • php 面向对象
  • 房地产预售阶段怎么开具发票
  • php面向对象详解
  • 在php中,字符串有哪些表示形式
  • 进入苹果icloud
  • 最小的蓝牙鼠标是哪款
  • php @method
  • 公交车停车场收费吗
  • 怎么启用framework3.5
  • 运动目标检测算法
  • 债权投资利息调整属于什么科目?
  • cobit框架
  • 长期股权投资
  • 数据库查询框架
  • java中通配符作用
  • 公司进项不够怎么开发票
  • 长期股权投资哪些用成本法
  • 企业的日常活动都有哪些
  • js array()
  • 基于vue的开源甘特图控件
  • 新办商贸企业是国企吗
  • 送货单收据怎么写
  • 股东不任职,是否可以参与企业经营
  • 外出经营流程
  • 固定资产投资入库申报材料
  • 固定资产全套账务处理2021
  • 以银行承兑汇票支付购买原材料款
  • 减值损失对公司有哪些影响
  • 租地青苗补偿问题
  • 增值税相关的问题
  • 企业收到待清算商户款项做什么分录
  • 发票丢失记账联入账
  • 年度的汇算清缴
  • 如何理解股权激励
  • 会计入职新公司
  • windows server 2003 sp2密钥
  • ios太极
  • 在Linux操作系统中哪些命令可以正确关闭系统防火墙
  • iis安装失败找不到源文件
  • centos7安装视频教程
  • 联想y485p升级无线网卡
  • winxp系统优化
  • 软件生态圈是什意思
  • [置顶]电影名字《收件人不详》
  • vs2010配置opengl
  • 基于核心素养下的大单元教学设计
  • Python判断字符串结尾并输出yes或no
  • easyui multiple
  • js复制数组的方法
  • Jar mismatch! Fix your dependencies
  • js初级教程
  • 河南电子税务局官网入口
  • 餐饮办税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设