vue中 router.beforeEach() 的用法示例代碼

更新時(shí)間：2023年12月25日 12:10:50 作者：都挺好，剛剛好

導(dǎo)航守衛(wèi)主要是通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,本文通過(guò)示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧

在前端路由跳轉(zhuǎn)中，路由跳轉(zhuǎn)前都是會(huì)經(jīng)過(guò)beforeEach，而beforeEach可以通過(guò)next來(lái)控制到底去哪個(gè)路由。
根據(jù)這個(gè)特性我們就可以在beforeEach中設(shè)置一些條件來(lái)控制路由的重定向。

常見的使用場(chǎng)景有：

1、驗(yàn)證用戶是否登錄（若未登錄，且當(dāng)前非登錄頁(yè)面，則自動(dòng)重定向登錄頁(yè)面）；2、用戶權(quán)限；3、用戶輸入的路路徑是否存在，不存在的情況下如何處理，重定向到哪個(gè)頁(yè)面。

此處呢我使用一個(gè)簡(jiǎn)單的例子：
當(dāng)用戶輸入的路徑不存在的情況下，將其重定向到‘/’路徑來(lái)說(shuō)明beforeEach是如何控制路由的。

話不多說(shuō)，直接看下邊如何實(shí)現(xiàn)的（這里我以創(chuàng)建一個(gè)名為router-be的項(xiàng)目為例）。

第一步：規(guī)定進(jìn)入路由是否需要權(quán)限

@/router/index.js

import A from '@/components/a'
{
	path : '/a',
	name : 'a',
	component : A,
	meta : {  // 加一個(gè)自定義obj
		requireAuth : true   // 參數(shù) true 代表需要登陸才能進(jìn)入 A
	}
}

第二步：使用vuex 整一個(gè)useid

@/assets/store.js

//使用vuex三步走
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//這個(gè)理論來(lái)說(shuō)
const store = new Vuex.Store({
	state:{
		userId : ''
	}
})
export default store

第三步：使用router.beforeEach()

思路：【
	如果（進(jìn)入這個(gè)路由需要權(quán)限）{
		如果(能獲取到這個(gè)用戶的userID){
			就讓這個(gè)用戶進(jìn)入這個(gè)路由
		}否則{
			就讓這個(gè)用戶進(jìn)入b這個(gè)頁(yè)面
		}
	} 即將進(jìn)入的路由不需要權(quán)限就能進(jìn)入 {
		就讓這個(gè)用戶進(jìn)入這個(gè)路由
	}
】
對(duì)應(yīng)代碼：
import store from '@/assets/store'   //把這個(gè)userId獲取過(guò)來(lái)
router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){
		if(store.state.userId){
			next()
		}else{
			next({path:'/b'})
		}
	}else{
		next()
	}
})

實(shí)現(xiàn)原理

constrouter=newVueRouter({…})
router.beforeEach((to,from,next)=>{// …})
每個(gè)守衛(wèi)方法接受三個(gè)參數(shù) ：

1.to => route : 即將進(jìn)入的目標(biāo)路由對(duì)象
2.from => route : 當(dāng)前導(dǎo)航正要離開的路由
3.next => function：一定要調(diào)用該方法來(lái) resolve這個(gè)鉤子，執(zhí)行效果以來(lái) next 方法的調(diào)用參數(shù)

第四步

上一步 /b 路由為登陸頁(yè)面
當(dāng)進(jìn)入A 頁(yè)面之前，需要先請(qǐng)求接口，獲取是否有登錄，然后把userId存在vuex 的state 中
當(dāng)沒有userId 時(shí)，則在登錄之后，存一個(gè)userId 到state 里

第五步項(xiàng)目中使用

權(quán)限

router.beforeEach((to, from, next) => {
  console.log(to);
  // DEBUG: 測(cè)試
  return next();
  const { ldomain } = to.query;
  if (ldomain) {
    document.domain = ldomain;
  }
  const { LoginPage } = byskConfig;
  if (!router.getMatchedComponents(to.path).length) {
    console.log("not page", to, from);
    return next(byskConfig.NotFoundPage.path);
  }
  //驗(yàn)證權(quán)限
  if (to.meta.permId && !hasPerms(to.meta.permId)) {
    console.log("no auth", to, from);
    return next(LoginPage.path);
  }
  //驗(yàn)證是否登錄
  if (to.meta.permId && !getCookie("sid")) {
    console.log("no login & signout", to, from);
    return next(LoginPage.path);
  }
  if (to.matched.length) {
    let parentRoute = to.matched[to.matched.length - 1].parent;
    if (
      parentRoute &&
      parentRoute.meta.hasOwnProperty("redirect") &&
      parentRoute.meta.redirect !== to.path) {
      parentRoute.meta.redirect = to.path;
    }
  }
  next();
});

在這里插入圖片描述