現如今,每個前端對於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 from'element-ui'
// 超時時間
axios.defaults.timeout = 5000
// http請求***
varloadinginstace
axios.interceptors.request.use(config => )
returnconfig
}, error => )
returnpromise.reject(error)
})
// http響應***
axios.interceptors.response.use(data => , error => )
returnpromise.reject(error)
})
exportdefaultaxios
這樣我們就統一處理了http請求和響應的攔截.當然我們可以根據具體的業務要求更改攔截中的處理.
路由攔截
我們可以通過路由攔截做什麼?我認為最主要的便是對許可權的控制,比如有的頁面需要登入了才能進入,有些頁面不同身份渲染不同.接下來簡單的講一下登入攔截.?
import vue from'vue'
import router from'vue-router'
vue.use(router)
const router =newrouter(
},
},
}, ,
component: (resolve) =>
}
]
})
// 判斷是否需要登入許可權 以及是否登入
router.beforeeach((to, from, next) =>else
})
}
}else
})
exportdefaultrouter
這樣就做好了登入攔截.我們只需在main.js中引入router就可以了.
實現許可權的控制我們還可以通過vuex來實現,但是如果是小型專案就沒必要引入vuex了
Vue axios 實現http攔截及路由攔截
在整1個小東東，改下試試，原來的乙個東東改動。中間需要用到 使用者許可權和攔截，看了vue2的方式。看到這文章，不錯，收藏了 用到了 http攔截 和 路由攔截 就不扒了，可過去看文章 建議方式 http攔截建1個獨立的檔案，在 main 中引入 路由正常應該都是給 弄成1個獨立檔案，在main 中...
Vue axios 實現http攔截及路由攔截
在整1個小東東，改下試試，原來的乙個東東改動。中間需要用到 使用者許可權和攔截，看了vue2的方式。看到這文章，不錯，收藏了 用到了 http攔截 和 路由攔截 就不扒了，可過去看文章 建議方式 http攔截建1個獨立的檔案，在 main 中引入 路由正常應該都是給 弄成1個獨立檔案，在main 中...
Vue axios處理http請求
make a request for a user with a given id axios.get user?id 12345 then function response catch function error optionally the request above could also ...