文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中如何处理token过期问题

2022-11-13 18:20

关注

后端为了安全,token一般存在有效时间,当token过期,所有请求失效

解决方案

方案一

在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token后再继续请求。

方案二

根据拦截返回后的数据判断,若token过期,先刷新token,再进行一次请求。

最简单方法:获取到过期code,直接跳到登录页 

方案三:封装axios基本结构

1、token是存在localStorage中

//在request.js
 
import axios from 'axios'
 
// 创建一个实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000 // request timeout
})
 
// 从localStorage中获取token
function getLocalToken () {
    const token = window.localStorage.getItem('token')
    return token
}
 
// 给实例添加一个setToken方法,用于登录后将最新token动态添加到header,同时将token保存在localStorage中
service.setToken = (token) => {
  instance.defaults.headers['X-Token'] = token
  window.localStorage.setItem('token', token)
}
 
// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  return response
}, error => {
  return Promise.reject(error)
})
 
//暴露
export default service

假如后端接口token过期返回的code是401

//获取新的token请求
function refreshToken () {
    return service.post('/refreshtoken').then(res => res.data)
}
 
// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  const { code } = response.data
      -----------------------------------------------------------
      // 说明token过期了,获取新的token
     if (code === 401) {
        return refreshToken().then(res => {
        // 刷新token成功,将最新的token更新到header中,同时保存在localStorage中
          const { token } = res.data
          service.setToken(token)
          
          // 获取当前失败的请求
          const config = response.config
          //重置失败请求的配置
          config.headers['X-Token'] = token
          config.baseURL = '' "
          //重试当前请求并返回promise
          return service(config)
        }).catch( res=>{
            //重新请求token失败,跳转到登录页
            window.location.href = '/login '
        } )
     }
     --------------------------------------------------------------
  return response
 
}, error => {
  return Promise.reject(error)
})

2、问题和优化

如果token失效时,存在多个请求,这就会导致多次执行刷新token的接口

在request.js中用一个变量来标记当前是否正在刷新token的状态,如果正在刷新则不再调用刷新token的接口 

在request.js 

// 是否正在刷新的标记
let isRefreshing = false
 
-----------------------------------------------------------
      // 说明token过期了,获取新的token
     if (code === 401) {
         //判断一下状态
        if( !isRefreshing ){
            //修改状态,进入更新token阶段
            isRefreshing = true
            
            return refreshToken().then(res => {
            // 刷新token成功,将最新的token更新到header中,同时保存在localStorage中
              const { token } = res.data
              service.setToken(token)
              
              // 获取当前失败的请求
              const config = response.config
              //重置失败请求的配置
              config.headers['X-Token'] = token
              config.baseURL = '' "
              //重试当前请求并返回promise
              return service(config)
            }).catch( res=>{
                //重新请求token失败,跳转到登录页
                window.location.href = '/login '
            } ).finally( ()=>{
                //完成之后在关闭状态
                isRefreshing = false
            } )
        }
     }

同时发起两个或以上的请求时,其他接口如何重试

两个接口几乎同时发起和返回,第一个接口会进入刷新token后重试的流程,而第二个接口需要先存起来,然后等刷新token后再重试。同样,如果同时发起三个请求,此时需要缓存后两个接口,等刷新token后再重试;

当第二个过期的请求进来,token正在刷新,我们先将这个请求存到一个数组队列中,想办法让这个请求处于等待中,一直等到刷新token后再逐个重试清空请求队列。

将请求存进队列中后,同时返回一个Promise,让这个Promise一直处于Pending状态(即不调用resolve),此时这个请求就会一直等啊等,只要我们不执行resolve,这个请求就会一直在等待。当刷新请求的接口返回来后,我们再调用resolve,逐个重试。

// 是否正在刷新的标记
let isRefreshing = false
// 重试队列,每一项将是一个待执行的函数形式
let requests = []
 
-----------------------------------------------------------
      // 说明token过期了,获取新的token
     if (code === 401) {
         const config = response.config
         //判断一下状态
        if( !isRefreshing ){
            //修改状态,进入更新token阶段
            isRefreshing = true
            // 获取当前的请求
            return refreshToken().then(res => {
            // 刷新token成功,将最新的token更新到header中,同时保存在localStorage中
              const { token } = res.data
              service.setToken(token)
              
              //重置失败请求的配置
              config.headers['X-Token'] = token
              config.baseURL = '' "
              
              //已经刷新了token,将所有队列中的请求进行重试
              requests.forEach(cb => cb(token))
              // 重试完了别忘了清空这个队列
              requests = []
              
              return service(config)
            }).catch( res=>{
                //重新请求token失败,跳转到登录页
                window.location.href = '/login '
            } ).finally( ()=>{
                //完成之后在关闭状态
                isRefreshing = false
            } )
        } else{
             // 正在刷新token,返回一个未执行resolve的promise
             return new Promise((resolve) => {
             // 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行
                 requests.push((token) => {
                      config.baseURL = ''
                      config.headers['X-Token'] = token
                      resolve(instance(config))
                    })
              })
        }
     }

3、完整版

//在request.js
 
import axios from 'axios'
 
// 是否正在刷新的标记
let isRefreshing = false
// 重试队列,每一项将是一个待执行的函数形式
let requests = []
 
// 创建一个实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000 // request timeout
})
 
// 从localStorage中获取token
function getLocalToken () {
    const token = window.localStorage.getItem('token')
    return token
}
 
// 给实例添加一个setToken方法,用于登录后将最新token动态添加到header,同时将token保存在localStorage中
service.setToken = (token) => {
  instance.defaults.headers['X-Token'] = token
  window.localStorage.setItem('token', token)
}
 
//获取新的token请求
function refreshToken () {
    return service.post('/refreshtoken').then(res => res.data)
}
 
// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  const { code } = response.data
    -----------------------------------------------------------
      // 说明token过期了,获取新的token
     if (code === 401) {
         const config = response.config
         //判断一下状态
        if( !isRefreshing ){
            //修改状态,进入更新token阶段
            isRefreshing = true
            // 获取当前的请求
            return refreshToken().then(res => {
            // 刷新token成功,将最新的token更新到header中,同时保存在localStorage中
              const { token } = res.data
              service.setToken(token)
              
              //重置失败请求的配置
              config.headers['X-Token'] = token
              config.baseURL = '' "
              
              //已经刷新了token,将所有队列中的请求进行重试
              requests.forEach(cb => cb(token))
              // 重试完了别忘了清空这个队列
              requests = []
              
              return service(config)
            }).catch( res=>{
                //重新请求token失败,跳转到登录页
                window.location.href = '/login '
            } ).finally( ()=>{
                //完成之后在关闭状态
                isRefreshing = false
            } )
        } else{
             // 正在刷新token,返回一个未执行resolve的promise
             return new Promise((resolve) => {
             // 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行
                 requests.push((token) => {
                      config.baseURL = ''
                      config.headers['X-Token'] = token
                      resolve(instance(config))
                    })
              })
        }
     }
     --------------------------------------------------------------
  return response
}, error => {
  return Promise.reject(error)
})
//暴露
export default service

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯