vue利用全局導航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面的實例代碼

更新時間：2020年05月19日 10:43:45 作者：他好像一條狗啊

這篇文章主要介紹了vue利用全局導航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

有這樣一個場景：如果你在登錄之前輸入了http://localhost:8080/oauth2-mgm-app/#/userManage，想進入userManage頁面，但是由于沒有登錄，系統(tǒng)是不會讓你進入這個頁面，之后會被定向到login頁面。但是在登錄之后，認為你有這個權限了，就需要重新定向到userManage頁面。大致流程圖如圖1所示：

圖1 登錄后跳轉(zhuǎn)到未登錄前指定頁面流程圖

　　在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作為驗證是否登錄的條件
  // 請根據(jù)自身業(yè)務需要修改
  // 本段代碼根據(jù)是否有權限菜單作為是否登錄依據(jù)
  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()無限循環(huán)
      next()
     }else{
      next({
       path: redirect
      });
     }
    }else{
     next();
    }
   } else {
    next({
     path: from.path
    })
   }
  } else {
   sessionStorage.setItem('redirect', to.fullPath);
   next({
    name: 'login'
   })
  }
 } else {
  next();
 }
})

　　系統(tǒng)以是否有權限菜單作為是否登錄依據(jù)，此處的權限菜單（不同人有不同的權限，所顯示的菜單也不一樣）由后端送出，處理成自己想要的樹結構（例如樣例代碼中的asideMenuConfig，如圖2所示）之后保存下來，此為前提。還有一種就是利用token驗證作為登錄依據(jù)，根據(jù)自己的業(yè)務需要吧，此處不展開。

圖2asideMenuConfig

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

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

　　然后我們需要遍歷$rout.matched來檢查路由記錄中的meta字段，這些在官方文檔中已經(jīng)寫的很清楚了，這里就不細細張開了。這里重點看下some() 方法，some()測試數(shù)組中的某些元素是否通過了指定函數(shù)的測試。

to.matched.some(record =>record.meta.requiresAuth)表示的是只要有一個頁面的meta里的requiresAuth為true，即需要權限，則to.matched.some()返回true?！　?/p>

最后還有一處代碼需要注意的是：

有人是不是就想了，獲取了登陸前保存的頁面路徑就可以直接跳轉(zhuǎn)到目標頁面了，即寫成下列這種形式，但是此舉會導致頁面一直無限循環(huán)調(diào)用導航守衛(wèi)。

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

原因是一定要調(diào)用next()來resolve這個導航守衛(wèi)鉤子，但是next()有參數(shù)和無參數(shù)是不一樣的，執(zhí)行效果依賴next()的調(diào)用參數(shù)。

　　next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導航的狀態(tài)就是confirmed(確認的)。

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