導航守衛

導航守衛？
通過路由進行一些操作，向常見的登錄權限校驗。當用戶滿足條件是進入導航，
否則取消登錄，跳轉到登錄頁面。
溫馨提示：
當參數和查詢的改變並不會觸發進入、離開導航守衛。
要想查看當前路由，通過this.$route對象來查看，或者使用組件內的守衛beforeRouteUpdate來查看路由。

一、全局守衛

1、route.beforeEach 全局前置守衛

可以改變導航本身。
當導航觸發時，全局前置守衛順序調用。守衛是異步解析的，
此時導航在所有守衛resolve之前一直處於等待階段 。

應用:
用戶未登錄時，根據條件跳轉到不同的頁面。若當前用戶登錄狀態失效，登錄收跳轉頁面，
根據路徑中的redirect的數據進行相應跳轉。

router.beforeEach((to, from, next) => {
	if (Vue.ls.get(ACCESS_TOKEN)) {
		// 已經登錄時，
		next({ path: ‘/home’ }
	} else {
		// 未登錄或登錄失效
		next({ path: ‘/login’ })
	}
})

2、route.beforeResolve 全局解析守衛

和route.beforeEach類似，在導航確認之前，同時在所有的組件內守衛、路由組件被解析之後，
解析導航守衛纔會被調用。

3、route.afterEach後置鉤子

導航被確認之後，調用。

二、路由獨享守衛

在配置路由時進行定義，beforeEach。

三、組件內的守衛

1、beforeRouteEnter守衛

需要注意的是在此時實例還未被被創建，因此this是無法使用的。
但是可以傳遞一個回調給next(vm=>{console.log('vm就是當前的實例')})

應用：
頁面刷新（router不是history模式下）保留刷新之前的路由。

beforeRouteEnter: function (to, from, next) {
  next(vm => {
  	 // 每次進入改路由更新數據
     vm.fn()
   })
 }

2、beforeRouteUpdate守衛

路由發生改變的時，且是被複用時調用。
如：路由中帶參數跳轉。

3、beforeRouteLeave守衛

通常用來禁止用戶在還未保存前突然離開，該導航可以通過next(false)來取消。

二、完整的導航流程

1. 導航被觸發；
2. 離開已經失活的組件守衛；
3. 進入全局前置導航守衛，route.beforeEach;
4. 組件守衛更新beforeRouteUpdate；
5. 調用路由配置的守衛，beforeEnter；
6. 解析路由組件；
7. 在激活的組件裏調用beforeRouteEnter；
8. 導航解析beforeResolve
9. 導航確認
10. 調用afterEach
11. 更新DOM