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

實(shí)現(xiàn)

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

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

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

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

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

• to：router即將進(jìn)入的路由對(duì)象。
• from：當(dāng)前導(dǎo)航正要離開(kāi)的路由。
• next：一個(gè)function，一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。
• next() : 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。
• next(false) : 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶(hù)手動(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' 之類(lèi)的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)，注意，next可以通過(guò)query傳遞參數(shù)。
• next(error) : (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。

說(shuō)明

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

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

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

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

from：代表著路由 /home ，我們將要離開(kāi)的路由。

注意，使用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)證的頁(yè)面才進(jìn)行攔截跳轉(zhuǎn)，因此，我們需要加一些判斷條件來(lái)進(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 來(lái)進(jìn)行判斷，所以我們要在router.js路由配置文件中為我們需要驗(yàn)證登錄判斷跳轉(zhuǎn)的路由添加一個(gè)字段來(lái)作為判斷條件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論