vue3配置多个代理，及响应拦截器，请求拦截器配置，拦截守卫配置

配置代理

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
   lintOnSave: false,
  devServer: {
    port: 8080,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
        "/api": {
            target: "http://10.6.110.59:8001",
            changeOrigin: true, //是否跨域
            pathRewrite: {
              "^/api": "",
            },
        },
        "/apt": {
          target: "http://10.6.110.29:8090/",
          changeOrigin: true, //表示是否跨域，
          pathRewrite: {
            //表示需要rewrite重写的
            "^/apt": " ",
          },
        }
    },
    },
},
});

请求拦截器和响应拦截器

import axios from "axios";
import { ElMessage } from 'element-plus'
import router from '../router/index'
// 创建一个 axios 实例
const service = axios.create({
  baseURL: '', // 所有的请求地址前缀部分
  timeout: 600000, // 请求超时时间毫秒
  withCredentials: true, // 异步请求携带cookie
  transformResponse: [
    function (data) {
      // 对 data 进行任意转换处理
      return data;
    },
  ],
});

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    config.headers["Content-Type"] = "application/json;charset=utf-8";
    let user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : null;
     if (user) {
     config.headers["Auth-token"] = user.token; // 设置请求头
    }
     return config;
     },

  (err) => {
    return Promise.reject(err);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (res) => {
    // res 响应结果
    let data = JSON.parse(res.data)
    if(data.code === 200){
      return data;
    }else if(data.code === 403){
      router.replace({name:'login'})
      ElMessage({
        type:'error',
        message:'权限过期，请重新登陆'
      })
    }else{
      return data;
    }
    
  },
  (err) => {
    return Promise.reject(err);
  }
);

export default service;

拦截守卫配置

let whiteArr = ["/login", "/changePage", "/myProject/forpassword"];

router.beforeEach((to, from, next) => {
  // 访问登录页，放行
  if (whiteArr.includes(to.path)) return next();
  // 读取本地存储的token
  const user = JSON.parse(window.sessionStorage.getItem("user") || "0");
  // 没有token, 强制跳转到登录页
  if (!user?.token) return next("/login");
  next();
});