Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實例
更新時間：2017年10月26日 10:25:50 作者：HaiJing1995
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在Vue2.0中的路由鉤子主要是用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或前取消，可以理解為路由守衛(wèi)。
分為全局導(dǎo)航鉤子，單個路由獨享的鉤子，組件內(nèi)鉤子。
三種 類型的鉤子只是用的地方不一樣，都接受一個函數(shù)作為參數(shù)，函數(shù)傳入三個參數(shù)，分別為to,from,next。
其中next有三個方法
(1)next(); //默認(rèn)路由
(2)next(false); //阻止路由跳轉(zhuǎn)
(3)next({path:'/'}); //阻止默認(rèn)路由，跳轉(zhuǎn)到指定路徑
這里我使用了組件內(nèi)鉤子進(jìn)行判斷token過期后跳轉(zhuǎn)到登錄頁，其他兩種鉤子可以去官網(wǎng)查看。
//路由前驗證
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();
}
})
}
實現(xiàn)方法很簡單，在路由前向服務(wù)器發(fā)送請求，如果返回的數(shù)據(jù)表明token過期則阻止默認(rèn)跳轉(zhuǎn)，否則就正常跳轉(zhuǎn)。
以上這篇Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了使用vue實現(xiàn)加載頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場,這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
通常我們的項目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue-cli3項目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex 的簡單使用,需要的朋友可以參考下2018-03-03
vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04