Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例
在Vue2.0中的路由鉤子主要是用來攔截導(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過期后跳轉(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過期則阻止默認(rèn)跳轉(zhuǎn)，否則就正常跳轉(zhuǎn)。
以上這篇Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)加載頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
有時(shí)候我們希望在指定的位置輸出我們的子元素,這時(shí)候具名插槽就排上了用場(chǎng),這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
通常我們的項(xiàng)目會(huì)越做越大,頁(yè)面也會(huì)越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex 的簡(jiǎn)單使用,需要的朋友可以參考下2018-03-03
vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04