Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例
現(xiàn)如今,每個(gè)前端對(duì)于Vue都不會(huì)陌生,Vue框架是如今最流行的前端框架之一,其勢(shì)頭直追react.最近我用vue做了一個(gè)項(xiàng)目,下面便是我從中取得的一點(diǎn)收獲.
基于現(xiàn)在用vue+webpack搭建項(xiàng)目的文檔已經(jīng)有很多了,我就不再累述了.
技術(shù)棧
- vue2.0
- vue-router
- axios
攔截器
首先我們要明白設(shè)置攔截器的目的是什么,當(dāng)我們需要統(tǒng)一處理http請(qǐng)求和響應(yīng)時(shí)我們通過設(shè)置攔截器處理方便很多.
這個(gè)項(xiàng)目我引入了element ui框架,所以我是結(jié)合element中l(wèi)oading和message組件來處理的.我們可以單獨(dú)建立一個(gè)http的js文件處理axios,再到main.js中引入.
/**
* http配置
*/
// 引入axios以及element ui中的loading和message組件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超時(shí)時(shí)間
axios.defaults.timeout = 5000
// http請(qǐng)求攔截器
var loadinginstace
axios.interceptors.request.use(config => {
// element ui Loading方法
loadinginstace = Loading.service({ fullscreen: true })
return config
}, error => {
loadinginstace.close()
Message.error({
message: '加載超時(shí)'
})
return Promise.reject(error)
})
// http響應(yīng)攔截器
axios.interceptors.response.use(data => {// 響應(yīng)成功關(guān)閉loading
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
Message.error({
message: '加載失敗'
})
return Promise.reject(error)
})
export default axios
這樣我們就統(tǒng)一處理了http請(qǐng)求和響應(yīng)的攔截.當(dāng)然我們可以根據(jù)具體的業(yè)務(wù)要求更改攔截中的處理.
路由攔截
我們可以通過路由攔截做什么?我認(rèn)為最主要的便是對(duì)權(quán)限的控制,比如有的頁面需要登錄了才能進(jìn)入,有些頁面不同身份渲染不同.接下來簡(jiǎn)單的講一下登錄攔截.
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',
// 需要登錄才能進(jìn)入的頁面可以增加一個(gè)meta屬性
meta: {
requireAuth: true
},
component: (resolve) => {
require(['../components/luck28/Luck'], resolve)
}
}
]
})
// 判斷是否需要登錄權(quán)限 以及是否登錄
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) {// 判斷是否需要登錄權(quán)限
if (localStorage.getItem('username')) {// 判斷是否登錄
next()
} else {// 沒登錄則跳轉(zhuǎn)到登錄界面
next({
path: '/Register',
query: {redirect: to.fullPath}
})
}
} else {
next()
}
})
export default router
這樣就做好了登錄攔截.我們只需在main.js中引入router就可以了.
實(shí)現(xiàn)權(quán)限的控制我們還可以通過Vuex來實(shí)現(xiàn),但是如果是小型項(xiàng)目就沒必要引入Vuex了.
以上是我做項(xiàng)目過程中的一些收獲,由于入Vue的坑也才兩月不到,有些地方可能有不足之處,歡迎大家指正,我會(huì)悉心聽取.也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個(gè)關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vuex中的getter和mutation的區(qū)別詳解
在現(xiàn)代前端開發(fā)中,狀態(tài)管理是一個(gè)不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫,在大型應(yīng)用中扮演著至關(guān)重要的角色,當(dāng)我們使用Vuex進(jìn)行狀態(tài)管理時(shí),getter和mutation是兩個(gè)重要的概念,在本文中,我們將詳細(xì)探討getter和mutation的區(qū)別,需要的朋友可以參考下2024-12-12
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10

