vue可以使用canActivate守衛(wèi)來(lái)限制用戶訪問(wèn)某些路由,若用戶不滿足某些條件則無(wú)法訪問(wèn)該路由。canActivate守衛(wèi)是在路由導(dǎo)航之前執(zhí)行的,可以用來(lái)進(jìn)行身份驗(yàn)證、權(quán)限驗(yàn)證等操作。
const router = new VueRouter({ routes: [ { path: '/dashboard', component: Dashboard, canActivate: [authGuard] } ] }) function authGuard(to, from, next) { if (localStorage.getItem('token')) { next() } else { next('/login') } }
在上面的代碼中,我們使用了一個(gè)authGuard函數(shù)作為canActivate守衛(wèi),該函數(shù)接收三個(gè)參數(shù):to、from和next。to參數(shù)表示用戶要進(jìn)入的路由,from表示用戶當(dāng)前所在的路由,next是一個(gè)函數(shù),用于指示Vue Router應(yīng)該如何進(jìn)行導(dǎo)航。
當(dāng)用戶進(jìn)入/dashboard路由時(shí),Vue Router會(huì)檢查該路由是否具有canActivate守衛(wèi)。由于我們將authGuard函數(shù)作為canActivate守衛(wèi)傳入路由配置中,因此Vue Router會(huì)自動(dòng)調(diào)用authGuard函數(shù)來(lái)驗(yàn)證用戶身份。
如果用戶已經(jīng)登錄,即localStorage中存儲(chǔ)了token(我們可以根據(jù)實(shí)際需求來(lái)確定身份驗(yàn)證的方式),則authGuard函數(shù)調(diào)用next()函數(shù),這將允許用戶訪問(wèn)/dashboard路由。如果用戶未登錄,則authGuard函數(shù)調(diào)用next('/login')函數(shù),這將重定向用戶到登錄頁(yè)面。