vue中的導航守衛（路由守衛）運用

首先，了解什么是路由守衛，拿來做什么

在項目中，沒次路由的切換或者頁面的刷新都需要我們判斷用戶是否已經登錄；

而vue-router提供了導航鈎子：

全局前置導航鈎子 beforeEach和全局后置導航鈎子 afterEach，這兩鈎子函數會在路由即將改變前和改變后進行觸發；

當然有全局的也有獨享的，他需要在路由配置的時候進行配置；

還有組件路由守衛，他是寫在每個單獨的vue文件里面的路由守衛。

這里還要說到導航鈎子提供的三個參數：

to：即將要進入的目標路由對象；

from：當前導航即將要離開的路由對象；

next ：只有在調用該方法后，路由才會改變，才能進入下一個鈎子函數（afterEach）。

注意：

next()//直接進to 所指路由
next(false) //中斷當前路由
next('/login') //跳轉指定路由

 

1. 路由獨享守衛

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // 需要的操作
            }
        }
    ]
})

2. 組件路由守衛

// 跟methods: {}等同級別書寫，組件路由守衛是寫在每個單獨的vue文件里面的路由守衛
beforeRouteEnter (to, from, next) {
    // 注意，在路由進入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一頁面，刷新不同數據時調用，
}
beforeRouteLeave (to, from, next) {
    // 離開當前路由頁面時調用
}

3. 全局路由守衛

前置守衛：一般會用來判斷用戶是否登錄，未登錄則跳轉登錄頁

router.beforeEach(async (to, from, next) => {
  clearHttpRequestingList();
  let sessionId = localStorage.getItem('sessionId') || '';
  NProgress.start();
  if (sessionId) { //已登錄
    next()
  } else { //未登錄定向到登錄頁面
    if( to.path == '/login') {
      next();
    } else {
      next('/login')
    }
  }
})

后置守衛：和beforeEach不同的是afterEach不接收第三個參數 next 函數，也不會改變導航本身

router.afterEach((to, from) => {
  // finish progress bar
  NProgress.done()
})