vue怎么用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面-創(chuàng)新互聯(lián)

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

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

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

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

　　在vue-route的官方文檔里其實(shí)有給到過(guò)這個(gè)demo，官方文檔鏈接在此：https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我們的需求，于是稍加改動(dòng)，先上代碼，搭配流程圖可能更容易理解：

router.beforeEach((to, from, next) => {
 var asideMenuConfig = sessionStorage.getItem("asideMenuConfig");
 // 驗(yàn)證當(dāng)前路由所有的匹配中是否需要有登錄驗(yàn)證的
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // 這里可以將cookie里是否存有token作為驗(yàn)證是否登錄的條件
  // 請(qǐng)根據(jù)自身業(yè)務(wù)需要修改
  // 本段代碼根據(jù)是否有權(quán)限菜單作為是否登錄依據(jù)
  if (asideMenuConfig) {
   //校驗(yàn)所跳路由是否在配置菜單中
   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()無(wú)限循環(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怎么用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article32/cosppc.html

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

廣告

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