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

  • 哔哩哔哩一个硬币相当于多少元(哔哩哔哩一个硬币等于多少经验)

    哔哩哔哩一个硬币相当于多少元(哔哩哔哩一个硬币等于多少经验)

  • 12306可以打电话订票吗(12306可以打电话退票吗)

    12306可以打电话订票吗(12306可以打电话退票吗)

  • 电脑亮度怎么调(电脑亮度怎么调节不了)

    电脑亮度怎么调(电脑亮度怎么调节不了)

  • 安卓如何打出苹果表情(安卓如何打出苹果符号)

    安卓如何打出苹果表情(安卓如何打出苹果符号)

  • 微信对齐发出去不对齐(微信 对齐)

    微信对齐发出去不对齐(微信 对齐)

  • 苹果内屏坏了有哪些现象(苹果内屏坏了有保修吗)

    苹果内屏坏了有哪些现象(苹果内屏坏了有保修吗)

  • 打印机换墨盒后还是显示没墨(打印机换墨盒后灯一直闪)

    打印机换墨盒后还是显示没墨(打印机换墨盒后灯一直闪)

  • 暂不支持显示此flash内容(为什么老是显示暂不支持该应用)

    暂不支持显示此flash内容(为什么老是显示暂不支持该应用)

  • nova5和nova5pro外观有什么区别(nova5和nova5pro外壳一样吗)

    nova5和nova5pro外观有什么区别(nova5和nova5pro外壳一样吗)

  • 发抖音怎么隐藏抖音号(发抖音怎么隐藏ip地址)

    发抖音怎么隐藏抖音号(发抖音怎么隐藏ip地址)

  • hd高清和bd高清有啥区别(hd高清和1080p区别)

    hd高清和bd高清有啥区别(hd高清和1080p区别)

  • 1mb的存储容量等于多少字节(1mb的存储容量相当于多少二进制位)

    1mb的存储容量等于多少字节(1mb的存储容量相当于多少二进制位)

  • 如何用优酷录视频(优酷如何录视频)

    如何用优酷录视频(优酷如何录视频)

  • 开机一键还原win7系统(开机一键还原win7系统按哪个键)

    开机一键还原win7系统(开机一键还原win7系统按哪个键)

  • 微信咋发30分钟了视频(微信怎么能发30秒)

    微信咋发30分钟了视频(微信怎么能发30秒)

  • lin总线电压9v正常吗(lin总线电压是多少)

    lin总线电压9v正常吗(lin总线电压是多少)

  • 如何制作小视频加音乐(如何制作小视频教程)

    如何制作小视频加音乐(如何制作小视频教程)

  • qq自动回复满了怎么删除(qq自动回复有上限吗)

    qq自动回复满了怎么删除(qq自动回复有上限吗)

  • 小米运动怎么绑定微信(小米运动怎么绑定手机号)

    小米运动怎么绑定微信(小米运动怎么绑定手机号)

  • vivo连接车载蓝牙卡顿(vivo连接车载蓝牙播放不了音乐)

    vivo连接车载蓝牙卡顿(vivo连接车载蓝牙播放不了音乐)

  • 开机键盘灯不亮(开机键盘灯不亮屏幕没反应)

    开机键盘灯不亮(开机键盘灯不亮屏幕没反应)

  • 苹果14promax上市时间(苹果14promax价格)

    苹果14promax上市时间(苹果14promax价格)

  • Windows7旗舰版系统电脑双显卡切换到独立显卡的图(windows7旗舰版最新版本)

    Windows7旗舰版系统电脑双显卡切换到独立显卡的图(windows7旗舰版最新版本)

  • 前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy(前端跨域的方法)

    前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy(前端跨域的方法)

  • C++ 手撸简易服务器(完善版本)(c++简易游戏)

    C++ 手撸简易服务器(完善版本)(c++简易游戏)

  • 电子税务局财务报表怎么更正申报
  • 纳税信用等级评定在哪里查询
  • 销售成本结转属于收入吗
  • 过次页的金额怎么来的
  • 企业持有到期债券的风险
  • 出纳做账流程视频
  • 在建工程在现金流量表中
  • 增值税一般纳税人是什么意思
  • 公司分立是不是法人
  • 免征增值税发票税率
  • 计提社保费计入什么科目
  • 专票金额和实际报销金额不符
  • 非独立核算的分公司如何报税
  • 业务招待费进项税额需要转出吗
  • 营增改的四大“增效剂”
  • 内部收益率的计算步骤有
  • 人工智能对财务人员的挑战与机遇
  • 附加税交税依据
  • 企业的利润分配顺序
  • 增值税交完之后还要交什么税
  • 价内税与价外税名词解释
  • 汽车展厅布置需要什么
  • 税务登记证遗失了怎么注销
  • 初始投资成本与可辨认净资产公允价值
  • win10回退到以前版本失败
  • Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)
  • 所得税退税会计分录为啥要借贷所得税费用
  • 年末资产减年初资产
  • 汇兑损益和财务费用区别
  • php图片加文字水印
  • hpzts04.exe是什么进程 有什么作用 hpzts04进程查询
  • laravel框架实现增删改查
  • 海关交税标准表
  • 圆顶山遗址
  • 商品入库进项税额怎么算
  • ROS2+cartographer+激光雷达+IMU里程计数据融合(robot_locazation) 建图
  • 分页page
  • 固定资产折旧提完后只剩净残值
  • 鹅卵石镇宅
  • 模型参数是什么意思
  • 使用php免费发送短信
  • 或有资产确认的前提为什么是
  • 员工办理健康证需要什么材料
  • 坏账准备的计提金额怎么算
  • 如何移除白名单的电话号码
  • 房产公司业务招待费扣除政策
  • 股东退股按什么退钱
  • 费用票必须是公司发票吗
  • 转让厂房需要交哪些税
  • 资产处置开票填什么项目
  • 经营性投资范畴
  • 预付房租的账务处理
  • 短期负债率和流动负债率
  • 融资租赁固定资产折旧年限
  • 汇算清缴退税分录怎么做
  • 差旅费出差补助标准
  • 企业间贴现手续怎么办理
  • 失业人员的养老金
  • 损益类账户借贷方向增减
  • 一般纳税人出现以下哪些情况时,其进项税额不得抵扣( )
  • 农民专业合作社属于什么经济类型
  • 解缴税费
  • 专利的费用计入成本吗
  • 中银单位结算卡年费
  • 流量对比
  • 资产处置收益和资产减值损失区别
  • 资本公积其他资本公积用途
  • 会计账簿的登记实训报告
  • 新开办企业如何建账
  • wind2000
  • debian系统
  • linux去掉指定字符
  • win7开机显示一堆英文
  • win8平板玩lol
  • 语音单词怎么读
  • vue全家桶包含哪些
  • javascript基础编程
  • jquery 导航
  • ubuntu各种方法卸载软件
  • 国家税务总局介绍
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设