配置代理
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();
});