一、前言

在我們的SPA頁面中，路由攔截可謂是十分的重要，是登入模組中的重要組成部分，那麼什麼是路由攔截有什麼用，今天我們就來看看吧

二、基本概念

路由攔截：毫無疑問，根據詞義就知道是將我們的路由攔截下來，不讓路由實現跳轉；

全域性守衛導航：直接看Vue官方文件的解釋吧——正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。這裡有很多方式植入路由導航中：全域性的，單個路由獨享的，或者元件級的。

三、路由攔截的作用

路由攔截主要用在我們的登入模組，判斷使用者有沒有登入過，其實就是檢查瀏覽中的sessionStorage中的token是否存在，如果存在，我們無需再次登入進入主頁，使用地址就可以進入主頁，實現結果如下圖所示：

如果不存在，使用地址進入主頁，就會攔截路由阻止跳轉到主頁，返回登入頁登入。也可以理解為是許可權的一個應用。實現結果如下圖所示：

四、實現方式

這裡我們肯定要是使用Vue中的鉤子函式beforeEach()對當前路徑進行判斷

鉤子函式beforeEach()中有三個引數to,from,next()：

實現程式碼：

//掛載路由導航守衛(路由攔截)
router.beforeEach((to,from,next) => {
  //to 將要訪問的路徑
  //from 代表從哪一個路徑跳轉而來
  //next()函式 代表放行
  if(to.path === "/login"){
    return next();
  }else{
    //獲取token
    const tokenStr = window.sessionStorage.getItem('token');
    if(!tokenStr){
      //如果未拿到token強制退出返回登入頁
      return next('/login')
    }else{
      next();
    }
  }
})
 

路由攔截在router中進行配置