尚硅谷后台管理系统

与后端服务器接口

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;