基礎(chǔ)思路就是使用vuex狀態(tài)管理來存儲(chǔ)登錄狀態(tài)(其實(shí)就是存一個(gè)值，例如token)，然后在路由跳轉(zhuǎn)前進(jìn)行登錄狀態(tài)的判斷，可以使用vue-router的全局前置守衛(wèi)beforeEach，也可以使用路由獨(dú)享的守衛(wèi)beforeEnter。

導(dǎo)航守衛(wèi)

正如其名，vue-router``` 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。 記住參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察 $route 對(duì)象來應(yīng)對(duì)這些變化，或使用beforeRouteUpdate的組件內(nèi)守衛(wèi)。

完整的導(dǎo)航解析流程

1、導(dǎo)航被觸發(fā)。

2、在失活的組件里調(diào)用離開守衛(wèi)。

3、調(diào)用全局的 beforeEach 守衛(wèi)。

4、在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。

5、在路由配置里調(diào)用 beforeEnter。

6、解析異步路由組件。

7、在被激活的組件里調(diào)用 beforeRouteEnter。

8、調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。

9、導(dǎo)航被確認(rèn)。

10、調(diào)用全局的 afterEach 鉤子。

11、觸發(fā) DOM 更新。

12、用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

全局守衛(wèi)

你可以使用 router.beforeEach注冊(cè)一個(gè)全局前置守衛(wèi)

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

to: Route:即將要進(jìn)入的目標(biāo) 路由對(duì)象

from: Route:當(dāng)前導(dǎo)航正要離開的路由

next: Function:一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next():進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false):中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

next(error):(2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError()注冊(cè)過的回調(diào)。

確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

路由獨(dú)享的守衛(wèi)

你可以在路由配置上直接定義beforeEnter守衛(wèi)：

const router = new VueRouter({ routes: [  {   path: '/foo',   component: Foo,   beforeEnter: (to, from, next) => {    // ...   }  } ]})

還有其他部分守衛(wèi)，詳情可以看官方文檔https://router.vuejs.org/zh-cn/advanced/navigation-guards.html