Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實(shí)例
更新時間：2017年10月26日 10:25:50 作者：HaiJing1995
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在Vue2.0中的路由鉤子主要是用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或前取消，可以理解為路由守衛(wèi)。
分為全局導(dǎo)航鉤子，單個路由獨(dú)享的鉤子，組件內(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)查看。
//路由前驗(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)方法很簡單，在路由前向服務(wù)器發(fā)送請求，如果返回的數(shù)據(jù)表明token過期則阻止默認(rèn)跳轉(zhuǎn)，否則就正常跳轉(zhuǎn)。
以上這篇Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的vendor.js文件過大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了前端自動化測試Vue中TDD和單元測試示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue.config.js使用代理配置真實(shí)請求url方式
這篇文章主要介紹了vue.config.js使用代理配置真實(shí)請求url方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+express 構(gòu)建后臺管理系統(tǒng)的示例代碼
這篇文章主要介紹了vue+express 構(gòu)建后臺管理系統(tǒng)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
詳解element-ui表格中勾選checkbox，高亮當(dāng)前行
這篇文章主要介紹了詳解element-ui表格中勾選checkbox，高亮當(dāng)前行，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue中的計算屬性computed傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue項(xiàng)目中Toast字體過小,沒有邊距的解決方案
這篇文章主要介紹了vue項(xiàng)目中Toast字體過小，沒有邊距的解決方案。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動的示例代碼
本文主要介紹了vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04