Vue利用路由鉤子token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例

發(fā)布時(shí)間：2020-09-25 07:47:03 來(lái)源：腳本之家閱讀：212 作者：HaiJing1995 欄目：web開(kāi)發(fā)

在Vue2.0中的路由鉤子主要是用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或前取消，可以理解為路由守衛(wèi)。

分為全局導(dǎo)航鉤子，單個(gè)路由獨(dú)享的鉤子，組件內(nèi)鉤子。

三種類型的鉤子只是用的地方不一樣，都接受一個(gè)函數(shù)作為參數(shù)，函數(shù)傳入三個(gè)參數(shù)，分別為to,from,next。

其中next有三個(gè)方法

(1)next(); //默認(rèn)路由

(2)next(false); //阻止路由跳轉(zhuǎn)

(3)next({path:'/'}); //阻止默認(rèn)路由，跳轉(zhuǎn)到指定路徑

這里我使用了組件內(nèi)鉤子進(jìn)行判斷token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)，其他兩種鉤子可以去官網(wǎng)查看。

//路由前驗(yàn)證
  beforeRouteEnter(to, from, next) {
   let postdata = {
    meta: {
     client_version: "1.0",
     client_type: "1",
    },
    data: {
     access_token: $.cookie("authtoken").toString()
    }
   }

   $.ajax({
    url: urls.serchuser,
    type: 'POST',
    data: JSON.stringify(postdata)
   }).done(data => {
    data = JSON.parse(data);
    console.log(data);
    if(data.status == 10050) {
     next(false);
     location.href = 'login.html';
    }else{
     next();
    }
   })
  }

實(shí)現(xiàn)方法很簡(jiǎn)單，在路由前向服務(wù)器發(fā)送請(qǐng)求，如果返回的數(shù)據(jù)表明token過(guò)期則阻止默認(rèn)跳轉(zhuǎn)，否則就正常跳轉(zhuǎn)。

以上這篇Vue利用路由鉤子token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

Vue利用路由鉤子token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽