axios常用拦截器配置

Posted 2021-07-17 SuperAnt_me

import axios from "axios";//axios引入
import { Message } from "element-ui";//message组件引入
import router from "../router";//路由

// 创建axios实例
const service = axios.create({
  baseURL: 'http://ip:port', //IP+端口
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url  多环境开发推荐
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request 超时
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    // do something before request is sent

    // if (store.getters.token) {
    //   // let each request carry token
    //   // ['X-Token'] is a custom headers key
    //   // please modify it according to the actual situation
    //   config.headers['X-Token'] = getToken()
    // }
    //添加token请求头
    if (sessionStorage.getItem("token")) {
      const token = sessionStorage.getItem("token");
      config.headers.token = token.replace(/\\"/g, "");
    }
    console.log("环境参数：", process.env.NODE_ENV);
    if (config.url.indexOf("?") > -1) {
      config.url = config.url + `&n=${encodeURIComponent(Math.random())}`;
    } else {
      config.url = config.url + `?n=${encodeURIComponent(Math.random())}`;
    }
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  (response) => {
    const res = response;

    if (res.status === 200 && res.data === -1) {
      // Message.closeAll()
      // Notification({
      //   message: '请重新登录',
      //   type: 'warning',
      //   duration: 1 * 1000
      // })
      // Notification.closeAll()
      // const currentRoute = router.currentRoute
      // if (currentRoute.path === '/Login' && currentRoute.query.redirect) {
      //   return
      // }
      // router.replace({  不跳转到 login页
      //   path: '/Login',
      //   query: { redirect: router.currentRoute.fullPath }
      // })
    }
    // if the custom code is not 20000, it is judged as an error.
    // if (res.status !== 200) {
    //   Message({
    //     message: res.message || 'Error',
    //     type: 'error',
    //     duration: 5 * 1000
    //   })

    //   return Promise.reject(new Error(res.message || 'Error'))
    // } else {
    //   return res
    // }
    return res.data;
  },
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          Message({
            message: "登陆过期，请重新登陆！",
            type: "error",
            duration: 5 * 1000
          });

          // router.replace({
          //   path: '/login',
          //   // query: { redirect: router.currentRoute.fullPath }
          // })
          // if(process.env=="delvelopment"){
          //   window.location.replace("http://adminuat.vvupup.com/manager/login");  //上测试和生产记得修改
          // }else{
          // window.location.replace("http://admin.vvupup.vanke.com/manager/login");  //上测试和生产记得修改
          // // }
          if (process.env.NODE_ENV == "delvelopment") {
            // 本地开发不进行跳转
          } else if (process.env.NODE_ENV == "production") {
            window.location.replace(
              "http://admin.vvupup.vanke.com/manager/login"
            ); //上测试和生产记得修改
          }
      }
    }
    if (
      error &&
      error.response &&
      error.response.data &&
      error.response.data.message
    ) {
      Message({
        message: error.response.data.message,
        type: "error",
        duration: 5 * 1000
      });
    } else {
      Message({
        message: "后台接口无响应或网络错误!",
        type: "error",
        duration: 5 * 1000
      });
    }
    return Promise.reject(error); // 返回接口返回的错误信息
  }
);

export default service;