路由守衛(wèi)
簡(jiǎn)單地說(shuō)燕垃,就是在路由解析的過(guò)程中,通過(guò)鉤子設(shè)置一些代碼允华,以便于實(shí)現(xiàn)監(jiān)聽(tīng)圈浇、控制、更改等操作靴寂。
全局守衛(wèi)
全局守衛(wèi)都是設(shè)置在 router 上面的磷蜀,這個(gè)可以在 router/index.js 里面找到“倬妫可以在這里設(shè)置全局守衛(wèi)褐隆,當(dāng)然也可以在其他地方設(shè)置全局守衛(wèi),比如 main.js 或者 App.vue剖踊。這個(gè)看具體的需要了庶弃。
全局前置守衛(wèi) router.beforeEach
我們可以在 router/index.js 里面設(shè)置一個(gè) 前置守衛(wèi)。
const router = createRouter({
history: createWebHistory(),
// base: '/blog/',
routes
})
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消導(dǎo)航
console.log('全局路由——to:', to)
console.log('全局路由——from:', from)
return true
})
image.png
我們可以得到離開(kāi)路由和目標(biāo)路由德澈,就是從哪里來(lái)的(from)歇攻,以及要到哪里去(to)。
那么在這里我們可以做些什么呢梆造?
設(shè)置瀏覽器的title
雖然現(xiàn)在的瀏覽器都是多標(biāo)簽的形式缴守,每個(gè)窗口的title展示的空間都非常小,基本顯示不了幾個(gè)字镇辉,但是也還是要設(shè)置一下屡穗。那么就可以在這里統(tǒng)一設(shè)置一下。登錄驗(yàn)證摊聋、權(quán)限驗(yàn)證
有些頁(yè)面必須登錄后才能訪問(wèn)鸡捐,比如用戶中心、管理后臺(tái)等麻裁,有些頁(yè)面還需要驗(yàn)證具體的權(quán)限箍镜,那么都可以在這里進(jìn)行。其他
編程本就是很靈活的事情煎源,所以沒(méi)有啥強(qiáng)制要求色迂。這里還可以放其他各種可以設(shè)置的功能。
未完待續(xù)...