Axios 并发请求添加token 值

测试具体代码如下

import axios from 'axios'

// 待重试的请求队列
let requestsQueue: Function[] =  []
// 正在请求token的标志值
let isFreshToken = false

// 从接口获取token值
function getToken () {
 return  http.get('/api/token').then(res => {
   return res.data.data.result
 })
}

const getSToken = () =>{
  return sessionStorage.getItem('__token__')
}

const setSToken = (token: string) =>{
  return sessionStorage.setItem('__token__', token)
}

const http = axios.create({
  timeout: 3000
})

http.interceptors.request.use((config) 









=> {
   // 请求 token URL 直接放行
   if(config.url?.match('token')) {
    return config
   }
   config.url = `${config.url}?t=${new Date().getTime()}`
  // 从sessionStorage 中获取 token 
  const crsfToken =  getSToken()
  // 当token 没有的时候 就去请求token
  if(!crsfToken) {
    if(!isFreshToken){
      isFreshToken = true
      getToken().then(token => {
        setSToken(token)
        requestsQueue.forEach(cb => {
          cb(token)
        })
        requestsQueue = []
      }).finally(() => {
        isFreshToken = false
      })
    }
    // 将config 存储在 requestsQueue 刷新队列中
    return new Promise(resolve => {
      requestsQueue.push(token => {
        config.headers['x-crsf-token'] = token
        resolve(config)
      })
    })
  }
  config.headers['x-crsf-token'] = crsfToken
  return config

})


http.interceptors.response.use(res =>{
  return res;
})
export  default  http
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值