vue 攔截器封裝

這裏用的elementUI

import axios from 'axios';
import qs from 'qs';
import { Message } from 'element-ui';
import router from 'vue-router';

import {baseURL} from "./fetch"
axios.defaults.timeout = 30000;
axios.defaults.baseURL = baseURL;
// http request 攔截器
// axios.interceptors.request.use(
//   config => {
//     if (config.method === 'get') {
//       if (config.url.indexOf('?') > 0) {
//         config.url = config.url + '&' + qs.stringify(config.data);
//       } else {
//         config.url = config.url + '?' + qs.stringify(config.data);
//       }
//     }
//     return config;
//   },
//   error => {
//     return Promise.reject(error);
//   }
// );

// http response 攔截器
axios.interceptors.response.use(
  response => {
    console.log("response",response)
    if (+response.data.code !== 200) {
      Message({ type: 'error', message: response.data.message });
    }
    return response;
  },
  error => {
    console.log("error",error.response) //錯誤響應

    if (error.response.data === 5000) {
      Message({ type: 'error', message: '登錄已失效，請重新登錄' });
      removeCookie('access_token');
      window.localStorage.removeItem('menuItem');
      router.push({
        path: '/login',
        querry: { redirect: router.currentRoute.fullPath } // 從哪個頁面跳轉
      });
    }
    Message({ type: 'error', message: error.response.data.message });
    return Promise.reject(error);
  }
);

export default axios

在main.js 中

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from "element-ui";
import  axios from './constants/http';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})