vue之路由導航守衛-全局前置守衛

一、使用方式

全局前置守衛用於在路由配置生效之前進行一些動作，可以使用 router.beforeEach 注冊一個全局前置守衛：

const router = new VueRouter({ ... })

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

參數：        

• to: Route: 即將要進入的目標 路由對象
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

　　　　（1）next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed (確認的)。

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

　　　　（3）next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

注意：確保要調用 next 方法，否則鈎子就不會被 resolved。

二、實例

在進入除登錄頁的其它頁面時常常需要判斷是否存在token如果存在則可以訪問，如果沒有需要返回到登錄頁，先進性登錄獲取token，此時可以利用前置守衛進行這個工作：

在router文件夾的index.js路由文件中：

//路由導航守衛
router.beforeEach((to, from, next) => {
  //to 要去的路由配置
  //from 當前的路由配置
  //next 一定要調用，讓to的路由配置繼續生效，比如如果去登陸直接next(),否則判斷token是否存在，如果存在就next()

  if (to.path === '/login') return next() ;//使用return，不需要寫else

  //判斷其他頁面是否有token
  const token = localStorage.getItem('token');

  //存在繼續往后走
  if (token) return next();


  // this.$router.push({name:'login'}) #沒有this,無法使用
  Message.warning('未登錄，請先登錄！')
  router.push({
    name: 'login'
  })


});

這樣無需在每一個url對應的組件中進行判斷token，避免繁瑣，如果在每一個組件中使用需要在每一個組件中的beforecreate方法中使用，比如在home組件中：

    //路由導航守衛無需再寫這個方法
    beforeCreate() {
      const token = localStorage.getItem('token');
      if (!token) {
        this.$router.push({name: 'login'})
      }
    },

參考：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB