原文連結 https://www.cnblogs.com/parkboyoung/p/6761863.html

ajax攔截器：
結合element-ui中loading和message元件來處理的，我們可以單獨建立一個http的js檔案處理axios，再到main.js中引入，統一處理http請求和響應：例如loadding圖顯示隱藏。

/**
 * 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', 
        // 需要登入才能進入的頁面可以增加一個meta屬性
      meta: { 
        requireAuth: true
      },
      component: (resolve) => {
        require(['../components/luck28/Luck'], resolve)
      }
    }
  ]
})
//  判斷是否需要登入許可權 以及是否登入
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) {// 判斷是否需要登入許可權
    if (localStorage.getItem('username')) {// 判斷是否登入
      next()
    } else {// 沒登入則跳轉到登入介面
      next({
        path: '/Register',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

export default router

這樣就做好了登入攔截.我們只需在main.js中引入router就可以了.