vue利用全局導航守衛做登陸後跳轉到未登陸前指定頁面

有這樣一個場景：若是你在登陸以前輸入了http://localhost:8080/oauth2-mgm-app/#/userManage，想進入userManage頁面，可是因爲沒有登陸，系統是不會讓你進入這個頁面，以後會被定向到login頁面。可是在登陸以後，認爲你有這個權限了，就須要從新定向到userManage頁面。大體流程圖如圖1所示：

圖1 登陸後跳轉到未登陸前指定頁面流程圖

　　在vue-route的官方文檔裏其實有給到過這個demo，官方文檔連接在此：https://router.vuejs.org/zh/guide/advanced/meta.html。可是不是很符合咱們的需求，因而稍加改動，先上代碼，搭配流程圖可能更容易理解：

router.beforeEach((to, from, next) => {
  var asideMenuConfig = sessionStorage.getItem("asideMenuConfig");
  // 驗證當前路由全部的匹配中是否須要有登陸驗證的
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 這裏能夠將cookie裏是否存有token做爲驗證是否登陸的條件
    // 請根據自身業務須要修改
    // 本段代碼根據是否有權限菜單做爲是否登陸依據
    if (asideMenuConfig) {
      //校驗所跳路由是否在配置菜單中
      if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") {
        if(sessionStorage.getItem('redirect')!=null){
          var redirect=sessionStorage.getItem('redirect');
          if(to.path == redirect){//解決next()無限循環
            next()
          }else{
            next({
              path: redirect
            });
          }
        }else{
          next();
        }
      } else {
        next({
          path: from.path
        })
      }
    } else {
      sessionStorage.setItem('redirect', to.fullPath);
      next({
        name: 'login'
      })
    }
  } else {
    next();
  }
})

　　系統以是否有權限菜單做爲是否登陸依據，此處的權限菜單（不一樣人有不一樣的權限，所顯示的菜單也不同）由後端送出，處理成本身想要的樹結構（例如樣例代碼中的asideMenuConfig，如圖2所示）以後保存下來，此爲前提。還有一種就是利用token驗證做爲登陸依據，根據本身的業務須要吧，此處不展開。

圖2 asideMenuConfig

　　首先要在route.js定義路由（代碼爲節選）:在路由元信息(meta字段)中添加一個對象，裏面包含：requiresAuth（是否須要權限），title（子菜單名），parent（所屬菜單名）

{
     path: '/RoleManage',
     name: 'RoleManage',
     component: () => import("@/pages/UserManage/roleManage"),
     meta: {
          requiresAuth: true,
          title: '角色管理',
          parent:"用戶管理"
     }
},

　　而後咱們須要遍歷$rout.matched來檢查路由記錄中的meta字段，這些在官方文檔中已經寫的很清楚了，這裏就不細細張開了。這裏重點看下some() 方法，some()測試數組中的某些元素是否經過了指定函數的測試。

to.matched.some(record => record.meta.requiresAuth)表示的是隻要有一個頁面的meta裏的requiresAuth爲true，即須要權限，則to.matched.some()返回true。

　　最後還有一處代碼須要注意的是：

有人是否是就想了，獲取了登錄前保存的頁面路徑就能夠直接跳轉到目標頁面了，即寫成下列這種形式，可是此舉會致使頁面一直無限循環調用導航守衛。

if(sessionStorage.getItem('redirect')!=null){
    var redirect=sessionStorage.getItem('redirect');
    next({
        path: redirect
    });
}else{
    next();
}    

緣由是必定要調用next()來 resolve 這個導航守衛鉤子，可是next()有參數和無參數是不同的，執行效果依賴next()的調用參數。

　　next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是confirmed(確認的)。

　　next()或者next({path:'/'})跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。你能夠向next傳遞任意位置對象，且容許設置諸如repace:true、name:'home'之類的選項以及任何用在route-link的to prop或router.push中的選項。

注意：確保要調用next()，不然鉤子就不會被 resolved。