更新時間:2023-06-29 來源:黑馬程序員 瀏覽量:
Vue中的導(dǎo)航守衛(wèi)主要用于控制路由的訪問權(quán)限,導(dǎo)航守衛(wèi)的工作示意圖如下:
每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時,都會觸發(fā)全局前置守衛(wèi)。因此,在全局前置守衛(wèi)中,程序員可以對每個路由進行訪問權(quán)限的控制。
//創(chuàng)建路由實例對象 const router - new VueRouter({..… }) // 調(diào)用路由實例對象的 beforeEach方法,即可聲明“全局前置守衛(wèi)” //每次發(fā)生路由導(dǎo)航跳轉(zhuǎn)的時候,都會自動般發(fā)fn這個“回調(diào)函數(shù)” router.beforeEach(fn)
全局前置守衛(wèi)的回調(diào)函數(shù)中接收3個形參,格式為:
//創(chuàng)建路由實例對象 const router = new VueRouter({ .…. }) //全局前置守衛(wèi) router.beforeEa:((to,from, next) => ( //to是將要訪問的路由的信息對象 //from是將要離開的路由的信息對象 // next是一個函數(shù),調(diào)用 next()表示放行,允許這次路由導(dǎo)航 })
參考示意圖,分析 next 函數(shù)的 3 種調(diào)用方式最終導(dǎo)致的結(jié)果:
當前用戶擁有后臺主頁的訪問權(quán)限,直接放行:next()。
當前用戶沒有后臺主頁的訪問權(quán)限,強制其跳轉(zhuǎn)到登錄頁面:next('/login')。
當前用戶沒有后臺主頁的訪問權(quán)限,不允許跳轉(zhuǎn)到后臺主頁:next(false)。
router.beforeEach((to, from, next) ?> { if (to.path === '/main'){ const token ? localStorage.getItem('token') if (token)( next()//訪問的是后臺主頁,且有 token 的值 } else { next('/login')//訪問的是后臺主頁,但是沒有 token的值 } } else { next()//訪問的不是后臺主頁,直接放行 } })