vue3无感刷新token

定义请求refreshToken的url

export const REFRESH_TOKEN = "/api/getRefreshToken"

定义一个refreshToken文件

// 获取RefreshToken
let promoseRT: any = ""
let isRefreshing = false
export function generalRefreshToken() {
  if (isRefreshing) {
    return promoseRT
  }
  isRefreshing = true
  promoseRT = request({
    url: REFRESH_TOKEN,
    method: 'post',
    data: {
      refer: 'gmc',
      refresh_token: getToken("refreshToken") }
  }).finally(() => {
    isRefreshing = false
  })
  return promoseRT
}

封装统一接口文件request.ts

import axios from 'axios'
import { generalRefreshToken } from "@/api/index";
import router from '@/router';
import {REFRESH_TOKEN} from '@/config/index'

let RefreshTokenCount = 0
// *创建axios实例对象
const instance = axios.create({
    baseURL: '/dev-api/',
    timeout: 6000,
})
// *创建请求拦截
instance.interceptors.request.use(
    // 请求成功时候配置
    config => {
      // 此处是解决重复刷新refreshToken、超过10次后则跳转到401页面
        if (config.url === REFRESH_TOKEN) {
            RefreshTokenCount++;
            if (RefreshTokenCount >= 10) {
                router.push('/401');
                return;
            }
        }
      // 配置统一请求头
        config.headers['Authorization'] = 'Bearer ' + getToken();
        return config
    },
    // 请求失败时候配置
    error => {
        return Promise.reject(error)
    }
)

// *创建响应拦截
instance.interceptors.response.use(
    (response) => {
        // Dialog.close()
        return response.data
    },
    // 请求结果失败
    async (error) => {
      // 在出现其他接口401的时候开始请求refreshToken
        if (error.response.status === 401) {
            const { data }: any = await generalRefreshToken()
            if (data && data.token) {
              //请求token后将token存起来
                error.config.headers.Authorization = 'Bearer ' + data.token
                setToken(data.token)
              //此处会实现已经报错的401接口重新在执行一遍
                return instance(error.config);
            }
        }
        return Promise.resolve(error)
      },
)


export default instance;