Vue+axios 实现http拦截及vue-router拦截

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from \'axios\'
import { Loading, Message } from \'element-ui\'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
  // element ui Loading方法
  loadinginstace = Loading.service({ fullscreen: true })
  return config
}, error => {
  loadinginstace.close()
  Message.error({
    message: \'加载超时\'
  })
  return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
  loadinginstace.close()
  return data
}, error => {
  loadinginstace.close()
  Message.error({
    message: \'加载失败\'
  })
  return Promise.reject(error)
})

export default axios

import Vue from \'vue\'
import Router from \'vue-router\'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: \'/\',
      /*
      *  按需加载 
      */
      component: (resolve) => {
        require([\'../components/Home\'], resolve)
      }
    }, {
      path: \'/record\',
      name: \'record\',
      component: (resolve) => {
        require([\'../components/Record\'], resolve)
      }
    }, {
      path: \'/Register\',
      name: \'Register\',
      component: (resolve) => {
        require([\'../components/Register\'], resolve)
      }
    }, {
      path: \'/Luck\',
      name: \'Luck\', 
        // 需要登录才能进入的页面可以增加一个 属性
       : { 
        requireAuth: true
      },
      component: (resolve) => {
        require([\'../components/luck28/Luck\'], resolve)
      }
    }
  ]
})
//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res. .requireAuth)) {// 判断是否需要登录权限
    if (localStorage.getItem(\'username\')) {// 判断是否登录
      next()
    } else {// 没登录则跳转到登录界面
      next({
        path: \'/Register\',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

export default router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack. .conf with an alias.
import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import Mint from \'mint-ui\';
import ElementUI from \'element-ui\';
import VueAwesomeSwiper from \'vue-awesome-swiper\'
import \'./assets/styles/reset.css\'
import \'mint-ui/lib/style.css\'
import \'element-ui/lib/theme-chalk/index.css\';
import \'swiper/dist/css/swiper.css\'
//import fastClick from \'fastclick\'
import axios from \'./http\'
import md5 from \'js-md5\';
//1像素边框问题
import \'./assets/styles/border.css\'
//阿里图标矢量库
import \'./assets/styles/iconfont.css\'
//点击复制
import Clipboard from \'clipboard\';