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/>'
})

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值