一、背景

　　在vue專案中使用vue-router做頁面跳轉時，路由的方式有兩種，一種是靜態路由，另一種是動態路由。而要實現對路由的控制需要使用vuex和router全域性守衛進行判斷攔截(安全問題文章最後討論)

二、使用場景

　　靜態路由的使用場景：在我們使用靜態路由實現頁面跳轉時，不管我們是否登入，當我們在位址列修改地址後，頁面會發生跳轉並展示頁面內容（資料並不會被展示出來），這樣的問題顯然是不能夠被接受的；

　　動態路由的使用場景：動態路由無非就是從後端拿到了資料然後在加到router裡面了。假如使用者登入了，在位址列修改地址便能直接訪問。所以動態路由並不能起到攔截作用。

三、解決方案

　　使用vuex+router.beforeEach()+動態路由實現頁面攔截

　　　　頁面重新整理時會清楚vuex裡面的值;(防止直接修改位址列)

　　　　router.beforeEach()對跳轉前進行攔截判斷;（對vuex裡面的值進行判斷）

　　　　當用戶登入時請求後臺拿到資料，載入路由.（跳轉頁面）

四、實現過程

　　1.首先定義vuex裡面的值，需要定義兩個值：a.登入狀態資訊的值 loginInfo b.儲存動態路由的值 routerList

　　2.router.beforeEach()對路由跳轉前進行控制　

//全域性守衛
router.beforeEach((to, from, next)=> {
  let userId 
 
= store.state.loginInfo.id;
  //這裡是對登入後的值進行判斷，也可對token的值進行判斷
    if (userId === '') {
      if (to.meta.requireAuth || to.name == null) {
        next({path: '/', query: {redirect: to.path}})
      } else {
        next();
      }
    } else {
      //初始化動態路由方法
      initRouter(router, store); 
      next();
    }
  }
);
 

3.初始化動態路由

在全域性守衛對應條件下載入動態路由資料routerList和在登入成功時儲存登入成功的資訊loginInfo 

  新建一個xxx.js檔案 引入axios 建立一個函式並使用export 暴露該方法;

 請求成功拿到資料後，把資料造成和router裡的資料一樣。然後使用 router.addRoutes 新增進去;

import axios from 'axios'
export const initRouter = (router,store)=>{
  if (store.state.routerList.length > 0) {
    return;
  }
  axios.get(' URL')
     .then((rest)=>{
      let routerList = [];
      if(rest.data.success){
        let routers = rest.data.body;
        routers.forEach(router=>{
            let {
              path,
              component,
              name,
            } = router
            let routerObj = {
              path:path,
              name:name,
              component(resolve){
                if (component.startsWith("index")) {
                  require(['../components/' + component + '.vue'], resolve)
                }       
                
              },
              meta:{requireAuth:true} //是否是登入許可權控制
            };
            routerList.push(routerObj);
          });
        //add到router中
        router.addRoutes(routerList); 
        //儲存到vuex中
        store.commit('routerList', routerList); 

      }else{
         console.log(rest.data.error);
      }
   }).catch((error)=>{
       console.log(error);
   })
}    

4.登入成功後儲存成功狀態資訊並跳轉頁面

 至此，頁面攔截功能已實現。

五、總結

　　該方法實現主要用到了:

　　1.vuex及頁面重新整理時會對vuex進行清空，所以比如退出時要對頁面window.location.reload()，其它地方類似。

　　2.router.beforeEach()鉤子函式及關鍵的router.addRoutes方法

　　3.es6的一些寫法

六、安全問題

　　上面寫了這麼多，到頭來還是竹籃打水一場空，雖然現在實現了未登入及登入後沒有登出時，回到登入頁面直接在位址列上修改地址後跳過登入進行了攔截；但是我們卻可以通過在console上this.$vm.$store._modules.root.state.loginInfo.id=‘’，修改vuex中state中的值。所以在客戶端永遠不要相信使用者的輸入。如有更好的解決方案歡迎留言。