在VUE官方文檔中有寫到 ‘導航”表示路由正在發生改變’,正如其名,vue-router
提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中:全局的, 單個路由獨享的, 或者組件級的。
每個守衛方法接收三個參數:
from: 當前導航正要離開的路由
next:
一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next
方法的調用參數。
聽起來可能有點繞,讓我們用一個登陸並判斷用戶登陸狀態的例子來解釋吧;
現在假設我們用VUE搭建了一個單頁面服務, 現在里面有兩個路由,一個是login,另一個是manage。
首先要明確的是如果我們想對后台數據進行操作的話,必須處於登陸狀態,不然隨便來一個匿名用戶就把你的庫刪了,你就只能立刻跑路了。
那么如果來判斷用戶是否登陸以及登陸狀態這時我們就要用到token了,
用戶登陸成功后,后台會在響應體中返回token,我們將token存儲在本地;那么我們就可以根據token是否存在來判斷用戶是否已經登陸過(無需判斷token是否有效,只要有就說明登陸過,是否過期交由后台判斷),我們所需要做的就是只要路由發生改變並且目標不是登陸路由的時候,我們就要去判斷這個用戶有沒有登陸過,如果沒有就跳轉到登陸頁讓他去登陸,否則說明他登陸過,那么我們就可以讓他正常訪問;
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
const tokensign = window.sessionStorage.getItm('token')
//to.path 目標路由
//next 必須有否則程序不會繼續執行
if(to.path !== '/login' && !tokensign) { return next('/login') }
next()
})
這樣只要用戶本地獲取不到token就說明他不是登陸狀態就會跳轉到/login路由。