在開發(fā)webApp的時(shí)候，考慮到用戶體驗(yàn)，經(jīng)常會(huì)把不需要調(diào)用個(gè)人數(shù)據(jù)的頁面設(shè)置成游客可以訪問，而當(dāng)用戶進(jìn)入到一些需要個(gè)人數(shù)據(jù)的，例如購(gòu)物車，個(gè)人中心，我的錢包等等，在進(jìn)行登錄的驗(yàn)證判斷，如果判斷已經(jīng)登錄，則顯示頁面，如果判斷未登錄，則直接跳轉(zhuǎn)到登錄頁面提示用戶登錄，今天就來分享下如何使用vue-router的beforEach方法來實(shí)現(xiàn)這個(gè)需求。

實(shí)現(xiàn)

本篇文章默認(rèn)您已經(jīng)會(huì)使用 webpack 或者 vue-cli 來進(jìn)行環(huán)境的搭建，并且具有一定的vue基礎(chǔ)，如果您目前是一個(gè)新手，那么網(wǎng)上搜索一下就好，相關(guān)文章非常多，這里就不再贅述了。 話不多說，直接上代碼。 為了方便日后代碼的可維護(hù)性，我把相關(guān)方法寫在了一個(gè)新建的filter.js文件里

接下來進(jìn)入filter.js文件中，首先引入vue-router： import router from "./router"; 然后我們使用 router.beforEach 方法：

router.beforeEach((to, from, next) => {  //根據(jù)字段判斷是否路由過濾  if (to.matched.some(record => record.meta.auth)) {    if (getToken() !== null) {      next()    } else {      //防止無限循環(huán)      if (to.name === 'login') {        next();        return      }      next({        path: '/login',      });    }  } else {    next()//若點(diǎn)擊的是不需要驗(yàn)證的頁面,則進(jìn)行正常的路由跳轉(zhuǎn)  }});

beforEach其實(shí)是vur-router的鉤子函數(shù)，可以理解為每個(gè)router跳轉(zhuǎn)之前都會(huì)調(diào)用的一個(gè)方法，既然有before同理當(dāng)然也有afterEach，這個(gè)我們以后再講。

首先來解釋下beforEach的三個(gè)參數(shù)：

• to：router即將進(jìn)入的路由對(duì)象。
• from：當(dāng)前導(dǎo)航正要離開的路由。
• next：一個(gè)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)航。 你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: ‘home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)，注意，next可以通過query傳遞參數(shù)。
• next(error) : (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)。

說明

好了，看到這里可能有些人還是沒有理解，沒關(guān)系，接下來我舉個(gè)例子就可以明白了。

假設(shè)我們目前有三個(gè)路由： /home，/mine，/login

我們初始進(jìn)入為 /home ，這時(shí)候點(diǎn)擊跳轉(zhuǎn) /mine ，但是由于我們沒有登錄，所以會(huì)自動(dòng)跳轉(zhuǎn)到 /login
在以上這種情況下，

to：代表著路由 /mine ，我們要進(jìn)入的路由。

from：代表著路由 /home ，我們將要離開的路由。

注意，使用beforEach最后必須要調(diào)用 next() ，否則會(huì)報(bào)錯(cuò)，如果不傳參數(shù)，我們就會(huì)成功進(jìn)入到 /mine ，如果我們傳遞參數(shù)，例如 next('/login') ，那么我們?cè)邳c(diǎn)擊任何路由都會(huì)跳轉(zhuǎn)到 /login 界面。

但是我們的需求是只有點(diǎn)擊需要進(jìn)行登錄驗(yàn)證的頁面才進(jìn)行攔截跳轉(zhuǎn)，因此，我們需要加一些判斷條件來進(jìn)行路由的篩選。

if (to.matched.some(record => record.meta.auth)) {    if (getToken() !== null) {      next()    }  }

這里的to就是上面講的參數(shù)to， to.matched 是一個(gè)對(duì)象數(shù)組，里面有to指向路由的相關(guān)信息，例如：path，name，meta等等。

我們用該數(shù)組調(diào)用some()方法根據(jù)返回值 true 或者 false 來進(jìn)行判斷，所以我們要在router.js路由配置文件中為我們需要驗(yàn)證登錄判斷跳轉(zhuǎn)的路由添加一個(gè)字段來作為判斷條件

{   path: '/mine',   name: 'mine',   component: mine,   meta:{auth:true} //我們自己添加的字段  }

由于給路由添加了 meta:{auth:true} ，所以我們的 to.matched.some(record => record.meta.auth) 會(huì)返回 true ，這時(shí)我們就可以做登錄判斷了，我的項(xiàng)目是通過把token存入到 localstorage 來進(jìn)行判斷的， getToken()是我封裝的一個(gè)獲取 localstorage 方法。

if (getToken() !== null) {      next()//若token不為null，則進(jìn)行路由跳轉(zhuǎn)    }

如果沒有token，我們下一步繼續(xù)進(jìn)行判斷，也就是最終目的，進(jìn)行路由攔截，跳轉(zhuǎn)到登錄頁

else {      next({        path: '/login',      });    }

但是這時(shí)候我們會(huì)遇到新的問題，打開控制臺(tái)會(huì)發(fā)現(xiàn)路由會(huì)無限的循環(huán)并最終崩潰，這是什么原因呢？仔細(xì)閱讀上文紅色加粗，我們可以理解為

next()next({ path: '/login', });

也就是說beforeEach()必須調(diào)用next()，否則就會(huì)出現(xiàn)無限循環(huán)

next() 和 next('xxx') 是不一樣的，區(qū)別就是前者不會(huì)再次調(diào)用router.beforeEach()，后者會(huì)。而由于我們沒有token，所以在重新調(diào)用router.beforeEach()后，會(huì)再次進(jìn)入到

else {      next({        path: '/login',      });    }

所以造成了無限循環(huán)，解決這個(gè)問題的方法也很簡(jiǎn)單，我們?cè)?next({ path: '/login', }); 之前增加一個(gè)判斷條件

if (to.name === 'login') {        next();        return    }

如果我們to的定向路由 name == 'login' ,則執(zhí)行 next(); 并return終止代碼運(yùn)行。

以上就是通過router.beforEach方法進(jìn)行路由攔截了，我們不僅僅可以只做登錄判斷，通過這個(gè)方法可以實(shí)現(xiàn)很多需求，只要是有關(guān)路由跳轉(zhuǎn)的都可以，在下只是拋磚引玉，如果有哪里不對(duì)的地方或者有更好的方法可以直接在評(píng)論告訴我，非常感謝。

總結(jié)

以上所述是小編給大家介紹的使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！