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

這篇文章給大家分享的是有關Vue+axios如何實現http攔截及路由攔截的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

技術棧

1. vue2.0

2. vue-router

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

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

感謝各位的閱讀！關于“Vue+axios如何實現http攔截及路由攔截”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！