Vue+axios 實現http攔截及路由攔截

標籤：業務   攔截器   介面   defaults   local   流行   成功   pre   scree   

 

 現如今,每個前端對於Vue都不會陌生,Vue架構是如今最流行的前端架構之一,其勢頭直追react.最近我用vue做了一個項目,下面便是我從中取得的一點收穫.

 基於現在用vue+webpack搭建項目的文檔已經有很多了,我就不再累述了.

  技術棧

• vue2.0
• vue-router
• axios

  攔截器

    首先我們要明白設定攔截器的目的是什麼,當我們需要統一處理http請求和響應時我們通過設定攔截器處理方便很多.

    這個項目我引入了element ui架構,所以我是結合element中loading和message組件來處理的.我們可以單獨建立一個http的js檔案處理axios,再到main.js中引入.

    

 1 /** 2  * http配置 3  */ 4 // 引入axios以及element ui中的loading和message組件 5 import axios from ‘axios‘ 6 import { Loading, Message } from ‘element-ui‘ 7 // 逾時時間 8 axios.defaults.timeout = 5000 9 // http請求攔截器10 var loadinginstace11 axios.interceptors.request.use(config => {12   // element ui Loading方法13   loadinginstace = Loading.service({ fullscreen: true })14   return config15 }, error => {16   loadinginstace.close()17   Message.error({18     message: ‘載入逾時‘19   })20   return Promise.reject(error)21 })22 // http響應攔截器23 axios.interceptors.response.use(data => {// 響應成功關閉loading24   loadinginstace.close()25   return data26 }, error => {27   loadinginstace.close()28   Message.error({29     message: ‘載入失敗‘30   })31   return Promise.reject(error)32 })33 34 export default axios

 

   這樣我們就統一處理了http請求和響應的攔截.當然我們可以根據具體的業務要求更改攔截中的處理.

 路由攔截

    我們可以通過路由攔截做什麼?我認為最主要的便是對許可權的控制,比如有的頁面需要登入了才能進入,有些頁面不同身份渲染不同.接下來簡單的講一下登入攔截.

    

 1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3  4 Vue.use(Router) 5  6 const router = new Router({ 7   routes: [ 8     { 9       path: ‘/‘,10       /*11       *  按需載入 12       */13       component: (resolve) => {14         require([‘../components/Home‘], resolve)15       }16     }, {17       path: ‘/record‘,18       name: ‘record‘,19       component: (resolve) => {20         require([‘../components/Record‘], resolve)21       }22     }, {23       path: ‘/Register‘,24       name: ‘Register‘,25       component: (resolve) => {26         require([‘../components/Register‘], resolve)27       }28     }, {29       path: ‘/Luck‘,30       name: ‘Luck‘, 
        // 需要登入才能進入的頁面可以增加一個meta屬性31       meta: { 32         requireAuth: true33       },34       component: (resolve) => {35         require([‘../components/luck28/Luck‘], resolve)36       }37     }38   ]39 })40 //  判斷是否需要登入許可權 以及是否登入41 router.beforeEach((to, from, next) => {42   if (to.matched.some(res => res.meta.requireAuth)) {// 判斷是否需要登入許可權43     if (localStorage.getItem(‘username‘)) {// 判斷是否登入44       next()45     } else {// 沒登入則跳轉到登入介面46       next({47         path: ‘/Register‘,48         query: {redirect: to.fullPath}49       })50     }51   } else {52     next()53   }54 })55 56 export default router

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

      實現許可權的控制我們還可以通過Vuex來實現,但是如果是小型項目就沒必要引入Vuex了.

   以上是我做項目過程中的一些收穫,由於入Vue的坑也才兩月不到,有些地方可能有不足之處,歡迎大家指正,我會悉心聽取.

Vue+axios 實現http攔截及路由攔截