使用axios结合access_token和refresh_token进行无感刷新

最新推荐文章于 2024-06-04 14:18:50 发布

新时代的弩力

最新推荐文章于 2024-06-04 14:18:50 发布

阅读量953

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42372534/article/details/136474641

版权

本文介绍了如何在Vue应用中使用axios进行HTTP请求，包括设置请求头、处理401响应（token失效）时自动保存配置并刷新令牌，确保请求连续性。

摘要由CSDN通过智能技术生成

这里利用到的主要是 axios 请求失败的config配置可以记住本次请求的参数，以及利用拦截器，等待刷新完后通过 axios(config) 再次发起请求。
小技巧：将每次请求失败的config和promise的resolve参数存放到数组中，等待刷新token完成再次请求

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import axios, { type InternalAxiosRequestConfig } from 'axios'
import { ref } from 'vue'

let isRefreshing = false // 标志是否正在刷新token
let requestQueue: { config: InternalAxiosRequestConfig; resolve: any }[] = [] // 存放token失效的请求配置的promise的resolve方法

axios.interceptors.request.use((config) => {
  config.headers.Authorization = 'bearer ' + localStorage.getItem('access_token') || '' //拦截器添加token请求头
  return config
})
axios.interceptors.response.use(
  (res) => {
    return res
  },
  async (err) => {
    const { config, response } = err
    if (response.status == 401 && !config.url.endsWith('/login')) {
      // eslint-disable-next-line no-async-promise-executor
      return new Promise(async (resolve) => {
        requestQueue.push({ config, resolve }) // accessToken失效后并发请求时，都会失败，把所有的config存起来，刷新完token再请求
        if (isRefreshing) {
          return
        }

        isRefreshing = true
        await refreshToken() // 使用refreshToken拿到新的有效的accessToken和refreshToken，存放到loalStorage中
        isRefreshing = false
        for (const { resolve, config } of requestQueue) {
          resolve(axios(config)) //这里请求失败拿到请求的config，才能重发请求
        }
      })
    }
    return Promise.reject(err)
  }
)

const refreshToken = async () => {
  const { data } = await axios.get('http://localhost:3000/refreshToken', {
    params: {
      refresh_token: localStorage.getItem('refresh_token')
    }
  })

  if (data.accessToken && data.refreshToken) {
    localStorage.setItem('access_token', data.accessToken)
    localStorage.setItem('refresh_token', data.refreshToken)
  }
}

const testData1 = ref()
const testData2 = ref()

const query = async () => {
  axios.get('http://localhost:3000/test1').then((res) => {
    testData1.value = res.data
  })
  axios.get('http://localhost:3000/test2').then((res) => {
    testData2.value = res.data
  })
}

const login = async () => {
  const { data } = await axios.get('http://localhost:3000/login')

  localStorage.setItem('access_token', data.accessToken)
  localStorage.setItem('refresh_token', data.refreshToken)
}
</script>

<template>
  <button @click="login">登录</button>
  <button @click="query()">请求</button>
  <div>
    <h1>{{ testData1 }}</h1>
    <h1>{{ testData2 }}</h1>
  </div>
</template>

<style scoped></style>