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

 現現在,每一個前端對於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 loadinginstace
11 axios.interceptors.request.use(config => {
12   // element ui Loading方法
13   loadinginstace = Loading.service({ fullscreen: true })
14   return config
15 }, error => {
16   loadinginstace.close()
17   Message.error({
18     message: '加載超時'
19   })
20   return Promise.reject(error)
21 })
22 // http響應攔截器
23 axios.interceptors.response.use(data => {// 響應成功關閉loading
24   loadinginstace.close()
25   return data
26 }, 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: true
33       },
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的坑也才兩月不到,有些地方可能有不足之處,歡迎你們指正,我會悉心聽取.