vue+axios 前端實(shí)現(xiàn)登錄攔截的兩種方式(路由攔截、http攔截)
一、路由攔截
登錄攔截邏輯
第一步:路由攔截
首先在定義路由的時(shí)候就需要多添加一個(gè)自定義字段requireAuth,用于判斷該路由的訪問是否需要登錄。如果用戶已經(jīng)登錄,則順利進(jìn)入路由,
否則就進(jìn)入登錄頁面。
const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加該字段,表示進(jìn)入這個(gè)路由是需要登錄的 }, component: Repository }, { path: '/login', name: 'login', component: Login } ];
定義完路由后,我們主要是利用vue-router提供的鉤子函數(shù)beforeEach()對(duì)路由進(jìn)行判斷。
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限 if (store.state.token) { // 通過vuex state獲取當(dāng)前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由 }) } } else { next(); } })
每個(gè)鉤子方法接收三個(gè)參數(shù):
* to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
* from: Route: 當(dāng)前導(dǎo)航正要離開的路由
* next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
* next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
* next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
* next(‘/') 或者 next({ path: ‘/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。
確保要調(diào)用 next 方法,否則鉤子就不會(huì)被 resolved。
完整的方法見/src/router.js
其中,to.meta中是我們自定義的數(shù)據(jù),其中就包括我們剛剛定義的requireAuth字段。通過這個(gè)字段來判斷該路由是否需要登錄權(quán)限。需要的話,同時(shí)當(dāng)前應(yīng)用不存在token,則跳轉(zhuǎn)到登錄頁面,進(jìn)行登錄。登錄成功后跳轉(zhuǎn)到目標(biāo)路由。
登錄攔截到這里就結(jié)束了嗎?并沒有。這種方式只是簡(jiǎn)單的前端路由控制,并不能真正阻止用戶訪問需要登錄權(quán)限的路由。還有一種情況便是:當(dāng)前token失效了,但是token依然保存在本地。這時(shí)候你去訪問需要登錄權(quán)限的路由時(shí),實(shí)際上應(yīng)該讓用戶重新登錄。
這時(shí)候就需要結(jié)合 http 攔截器 + 后端接口返回的http 狀態(tài)碼來判斷。
第二步:攔截器
要想統(tǒng)一處理所有http請(qǐng)求和響應(yīng),就得用上 axios 的攔截器。通過配置http response inteceptor,當(dāng)后端接口返回401 Unauthorized(未授權(quán)),讓用戶重新登錄。
// http request 攔截器 axios.interceptors.request.use( config => { if (store.state.token) { // 判斷是否存在token,如果存在的話,則每個(gè)http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的錯(cuò)誤信息 });
二、http攔截
攔截器
首先我們要明白設(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ù)要求更改攔截中的處理.
vue2+element更全面,更簡(jiǎn)單深入的例子 請(qǐng)查看:https://github.com/guo11111/vue2-demo
總結(jié)
以上所述是小編給大家介紹的vue+axios 前端實(shí)現(xiàn)登錄攔截的兩種方式(路由攔截、http攔截),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vue-router中的hash和history兩種模式的區(qū)別
- Vue-router 中hash模式和history模式的區(qū)別
- vue-router 前端路由之路由傳值的方式詳解
- vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
- Vue-router中hash模式與history模式的區(qū)別詳解
- 從vue-router看前端路由的兩種實(shí)現(xiàn)
- Vue Element前端應(yīng)用開發(fā)之動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理
- vue-router中hash模式與history模式的區(qū)別
- Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
- Vue?前端路由工作原理hash與history的區(qū)別
相關(guān)文章
vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配
這篇文章主要介紹了vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配的相關(guān)知識(shí),通過實(shí)例代碼介紹了vue用rem布局的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-09-09Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例
這篇文章主要介紹了vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue3在Setup中使用axios請(qǐng)求獲取的值方式
這篇文章主要介紹了Vue3在Setup中使用axios請(qǐng)求獲取的值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue3中<script?setup>?和?setup函數(shù)的區(qū)別對(duì)比
這篇文章主要介紹了vue3中<script?setup>?和?setup函數(shù)的區(qū)別,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue使用js-file-download完成導(dǎo)出功能實(shí)例
這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11