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

  • 苹果13pro是什么处理器(苹果13pro是什么基带)

    苹果13pro是什么处理器(苹果13pro是什么基带)

  • 芒果tv怎么关闭自动续费安卓手机(芒果tv怎么关闭会员自动续费)

    芒果tv怎么关闭自动续费安卓手机(芒果tv怎么关闭会员自动续费)

  • 抖音横屏模式在哪里设置(抖音横屏功能)

    抖音横屏模式在哪里设置(抖音横屏功能)

  • 美团我的钱包在哪里(美团我的钱包在哪个位置)

    美团我的钱包在哪里(美团我的钱包在哪个位置)

  • 华为p40用的什么电池(华为P40用的什么传感器)

    华为p40用的什么电池(华为P40用的什么传感器)

  • 华为nova7微信如何加密(华为nova7微信如何共享存储空间)

    华为nova7微信如何加密(华为nova7微信如何共享存储空间)

  • 哪个播放器可以倍速播放(哪个播放器可以看所有电视剧免费)

    哪个播放器可以倍速播放(哪个播放器可以看所有电视剧免费)

  • iphone11电池寿命(iPhone11电池寿命79)

    iphone11电池寿命(iPhone11电池寿命79)

  • 显卡风扇不转电脑无信号(显卡风扇不转电脑黑屏键盘亮)

    显卡风扇不转电脑无信号(显卡风扇不转电脑黑屏键盘亮)

  • qq怎么恢复删除的好友(qq怎么恢复删除的好友和群)

    qq怎么恢复删除的好友(qq怎么恢复删除的好友和群)

  • ipad屏幕特别暗调不亮(ipad屏幕变得很暗无法调节)

    ipad屏幕特别暗调不亮(ipad屏幕变得很暗无法调节)

  • 华为nova7耳机孔在哪里(华为耳机孔在哪里)

    华为nova7耳机孔在哪里(华为耳机孔在哪里)

  • soul怎么才算已读(soul怎么判断对方把你删除)

    soul怎么才算已读(soul怎么判断对方把你删除)

  • 5000mah是多少毫安(5000mah是多少毫安可充电多久)

    5000mah是多少毫安(5000mah是多少毫安可充电多久)

  • 小米9截屏的图片在相册里找不到为什么(小米9截屏的图标在哪里)

    小米9截屏的图片在相册里找不到为什么(小米9截屏的图标在哪里)

  • word如何居中并左对齐(word中怎么居中)

    word如何居中并左对齐(word中怎么居中)

  • 抖音顶置什么意思(抖音上有顶置是什么意思)

    抖音顶置什么意思(抖音上有顶置是什么意思)

  • powerpoint文档的默认扩展名是(powerpoint文档的默认扩展名为)

    powerpoint文档的默认扩展名是(powerpoint文档的默认扩展名为)

  • vivox30是不是曲面屏(vivo x30pro是不是曲屏)

    vivox30是不是曲面屏(vivo x30pro是不是曲屏)

  • 微信群活动账单是什么情况(微信群活动账单怎么弄)

    微信群活动账单是什么情况(微信群活动账单怎么弄)

  • 本地连接禁用了怎么恢复(本地连接禁用了,怎么也启动不了,怎么办?)

    本地连接禁用了怎么恢复(本地连接禁用了,怎么也启动不了,怎么办?)

  • 小米文档查看器在哪里(小米文档查看器卸载了怎么办)

    小米文档查看器在哪里(小米文档查看器卸载了怎么办)

  • 美团2人拼团可以退吗(美团2人拼团可以只消费一个人吗)

    美团2人拼团可以退吗(美团2人拼团可以只消费一个人吗)

  • 趣专享怎么退款(趣专享客服电话号码在哪里)

    趣专享怎么退款(趣专享客服电话号码在哪里)

  • oppo相册私密照片在哪里看(oppo相册私密照片删除怎么恢复)

    oppo相册私密照片在哪里看(oppo相册私密照片删除怎么恢复)

  • 拼多多电子面单怎么申请(拼多多电子面单共享怎么设置)

    拼多多电子面单怎么申请(拼多多电子面单共享怎么设置)

  • 什么是app制作(app制作方式)

    什么是app制作(app制作方式)

  • win10待机时间怎么设置(win10 待机时间)

    win10待机时间怎么设置(win10 待机时间)

  • 《web应用技术》学习规划日程表(web应用技术是什么)

    《web应用技术》学习规划日程表(web应用技术是什么)

  • sharectl命令  配置和管理文件共享服务(-shared)

    sharectl命令 配置和管理文件共享服务(-shared)

  • 节能服务公司可以做什么
  • 银行电子回单有没有法律效应
  • 出口退税认定如何办理
  • 外地多预交的税款申报时该怎么填写?
  • 印花税的账目处理
  • 建筑施工企业的分公司区域公司等较大的
  • 桥闸通行费怎么做账务处理
  • 银行承兑汇票和支票的区别
  • 税盘没有及时清卡
  • 包工包料工程要交哪些税
  • 三证合一是哪三证孩子上学
  • 税总界定超标准小规模纳税人偷税数额
  • 销售滞后是什么行为
  • 公允价值确定方法最新
  • 垃圾处理的公司有哪些
  • 补交前期未开票收入税金本期怎么申报?
  • 收购股权怎么做账
  • 土地款印花税计入无形资产吗
  • 清单申报和专项申报的区别
  • 建筑工程的适用范围
  • 技术转让税收优惠政策500万
  • 新领的发票怎么读入开票系统
  • 企业恢复生产经营方案
  • 哪些进项税不能加计抵减
  • 国税登记流程
  • 样品开发费用怎么记账
  • 一般纳税人库存商品怎么做分录
  • 保险公司的税收是多少
  • 应付职工薪酬明细表怎么填写
  • 广播影视服务需要交文化事业建设费吗
  • 核销坏账应具备的条件
  • 电脑网速不好怎么提升网速
  • 联想昭阳k41笔记本
  • win7对话框文本框在哪里
  • php常用扩展有哪些
  • windows为什么从7开始
  • xwizard.exe是什么
  • 文竹叶子发黄怎么办
  • 销售使用过的固定资产3%减按2%
  • 固定资产没有发票可以计提折旧吗
  • 应付票据抵付应付账款会计分录
  • 买税控盘的钱怎么做账
  • 已用短信息服务发送信息,对方能收到吗
  • defaultpool
  • vue面试题2020
  • 最强alpha什么意思
  • php中global
  • 认缴制下怎样变更法人
  • 远期汇票分为哪几种
  • 长期借款期末余额表示什么
  • 应收票据和其他应收款的区别
  • java怎么用mysql
  • 预付账款是什么意思大白话
  • 主营业务成本是什么科目
  • 在途物资属于会计科目吗
  • 暂估入库有时间限制吗
  • 施工企业预估成本怎么算
  • 去年计提的费用今年取得发票 汇算清缴
  • 国库集中支付是什么意思
  • 电子发票已开出客户退款会计处理是怎样的?
  • 车辆上牌的费用应付多少?
  • 收到其他公司款项会计分录
  • 药品进销差价的计算公式是什么
  • 设备基础属于什么基础
  • 数据库服务器配置方案
  • win10无法新建文件夹怎么办?(已解决)
  • linux/unix
  • 怎么关闭windows登录密码
  • 苹果电脑旋转屏幕设置在哪里找
  • 进不去操作系统 怎么样修复引导
  • win7系统连不了网络
  • jquery动画库
  • js堆栈和队列
  • python中数字运算
  • jquery做菜单
  • js设计模式有什么用
  • 浅析2种JavaScript继承方式
  • 世界银行各国经济gdp动态
  • 百旺税控盘口令错误被锁了怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设