尚硅谷后台管理系统

与后端服务器接口

vite.config.ts中配置：

server: {proxy: {"/api": {target: "http://127.0.0.1:10086",   changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ""), // 去掉前面的 /api},},},

后端文档根据对应地址写api:

enum API {LOGIN_URL = "admin/acl/index/login",   //则会像'http://127.0.0.1:10086/admin/acl/index/login'发送登录请求USERINFO_URL = "admin/acl/index/info",  //vite.config.ts中自动会将/api给去掉LOGOUT_URL = "admin/acl/index/logout",
}

在request.ts中二次封装axios请求，然后处理请求、拦截服务器

let request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API, //基础路径会写的/api  timeout: 5000,
}); 
request.interceptors.request.use((config) => {const token = localStorage.getItem("TOKEN");if (token) {config.headers.token = token;}return config;
});
//响应拦截器
request.interceptors.response.use((response) => {return response.data;},(error) => {//处理http网络错误let message = "";//http状态码let status = error.response.status;switch (status) {case 401:message = "TOKEN过期";break;case 403:message = "没有权限访问";break;case 404:message = "请求地址错误";break;case 500:message = "服务器内部错误";break;default:message = "网络连接失败";break;}ElMessage({type: "error",message,});return Promise.reject(error);}
);export default request;