Vue+axios 實現http攔截及vue-router攔截

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

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

  技術棧

• vue2.0
• vue-router
• axios

  攔截器

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

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

/**
 * 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

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

 路由攔截

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

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就可以了.

main.js 按需引入

// The Vue build version to load with the `import` command
// (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 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';