這篇文章主要講解了vue怎么用全局導航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比海鹽網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式海鹽網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋海鹽地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

有這樣一個場景：如果你在登錄之前輸入了http://localhost:8080/oauth3-mgm-app/#/userManage，想進入userManage頁面，但是由于沒有登錄，系統(tǒng)是不會讓你進入這個頁面，之后會被定向到login頁面。但是在登錄之后，認為你有這個權(quán)限了，就需要重新定向到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è)務(wù)需要修改
  // 本段代碼根據(jù)是否有權(quán)限菜單作為是否登錄依據(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();
 }
})

文章題目：vue怎么用全局導航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面-創(chuàng)新互聯(lián)
當前地址：http://jinyejixie.com/article32/cosppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、企業(yè)建站、響應(yīng)式網(wǎng)站、Google、定制開發(fā)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)