Vue3 怎么封装axios 请求拦截的时候进行路由跳转

我们在封装Vue3的时候很多时候会进行token校验，在校验失败的情况下会跳转到登录页面要求重新登录。

但是useRouter只有在setup中可以适合用，在axios拦截器中就不生效了，因为拦截器定义的时候路由还没创建，所以我们的处理方法就是将router直接导入到axios的封装实例文件中，然后直接使用router.push();

import apiConfig from '../../config/api.js';
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "../../route/index.js"; // 这边进行路由的导入

let {GUPIAO_URL, RETRY_DELAY, RETRY_TIMES, TIME_OUT} = apiConfig;

const instance = axios.create({
  baseURL: GUPIAO_URL
})

//拦截器 -- 请求拦截
instance.interceptors.request.use(config => {
  //添加头实例token
  let token = localStorage["token"];
  let id = localStorage['id'];
  if(token && id)
  {
      config.headers = {
          "Authorization": `Bearer ${token} ${id}`
      };
  }
  //sessionStorage 内容动态设置baseurl
  //config.url = sessionStorage["内容动态设置baseurl"] + config.url
  // console.log(config.url)
  // console.log(config)
  return config;
}, error => {
  console.log("request err")
  return Promise.reject(error)
})

//拦截器 -- 响应拦截
instance.interceptors.response.use(res => {
  if (res.data && res.data.code !== 200) {
    ElMessage.error(res.data.errMsg);
    // 登录超时, 重新登录
    if (res.data.code === 401) {
      // 清除本地信息
      localStorage.clear();
      // 跳转到登录页
      router.push('/');
      return;
    }
  }
  return res.data.msg;
}, err => {
  //出错重发，间隔一秒
  let config = err.config;
  // If config does not exist or the retry option is not set, reject
  if (!config || !config.retry) return Promise.reject(err);

  // Set the variable for keeping track of the retry count
  config.__retryCount = config.__retryCount || 0;

  // Check if we've maxed out the total number of retries
  if (config.__retryCount >= config.retry) {
    // Reject with the error
    return Promise.reject(err);
  }

  // Increase the retry count
  config.__retryCount += 1;

  // Create new promise to handle exponential backoff
  let backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, config.retryDelay || 1);
  });

  // Return the promise in which recalls axios to retry the request
  return backoff.then(function () {
    return instance(config);
  });
})
export default instance;