Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例
現(xiàn)如今,每個前端對于Vue都不會陌生,Vue框架是如今最流行的前端框架之一,其勢頭直追react.最近我用vue做了一個項(xiàng)目,下面便是我從中取得的一點(diǎn)收獲.
基于現(xiàn)在用vue+webpack搭建項(xiàng)目的文檔已經(jīng)有很多了,我就不再累述了.
技術(shù)棧
- vue2.0
- vue-router
- axios
攔截器
首先我們要明白設(shè)置攔截器的目的是什么,當(dāng)我們需要統(tǒng)一處理http請求和響應(yīng)時我們通過設(shè)置攔截器處理方便很多.
這個項(xiàng)目我引入了element ui框架,所以我是結(jié)合element中l(wèi)oading和message組件來處理的.我們可以單獨(dú)建立一個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響應(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請求和響應(yīng)的攔截.當(dāng)然我們可以根據(jù)具體的業(yè)務(wù)要求更改攔截中的處理.
路由攔截
我們可以通過路由攔截做什么?我認(rèn)為最主要的便是對權(quán)限的控制,比如有的頁面需要登錄了才能進(jì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)入的頁面可以增加一個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的坑也才兩月不到,有些地方可能有不足之處,歡迎大家指正,我會悉心聽取.也希望大家多多支持腳本之家。
相關(guān)文章
淺談在vue中用webpack打包之后運(yùn)行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運(yùn)行文件的問題以及相關(guān)配置方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02基于Vue2-Calendar改進(jìn)的日歷組件(含中文使用說明)
這篇文章主要介紹了基于Vue2-Calendar改進(jìn)的日歷組件(含中文使用說明)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04vue完美實(shí)現(xiàn)el-table列寬自適應(yīng)
這篇文章主要介紹了vue完美實(shí)現(xiàn)el-table列寬自適應(yīng),對vue感興趣的同學(xué),可以參考下2021-05-05Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-113分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02