在web項(xiàng)目中，經(jīng)常需要根據(jù)是否登錄進(jìn)行路由的驗(yàn)證和相應(yīng)的攔截。
首先，在vuex里的store.js里邊寫一個(gè)存放登錄狀態(tài)，代碼如下
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { user: false }, mutations: { // 登錄 login (state, user) { state.user = user }, // 退出 logout (state, user) { state.user = false } }})路由驗(yàn)證：
路由驗(yàn)證用 router.beforeEach( (to, from, next) => { }
這里的to代表要去的路由指向，from是指從哪個(gè)路由跳轉(zhuǎn)過來的，next是判斷操作，如果為空，表示放行。
比如：下一跳的路由為‘/watchHouse'或者‘/AgentMsg' ，如果沒有登錄的話，通過代碼 next ({path: '/login'})
跳轉(zhuǎn)到登錄的界面。代碼如下：
if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) { next({ path: '/login' })}比如：在路由‘/my'下，要跳往 ‘/ToolCompute'，如果沒有登錄的話，跳轉(zhuǎn)到登錄頁(yè)面。代碼如下：
if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) { next({ path: '/login' })}全部代碼：
router.beforeEach((to, from, next) => { if (to.path === '/login') { next() } else { if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) { next({ path: '/login' }) } else { next() } if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) { next({ path: '/login' }) } }})需要注意的是，路由驗(yàn)證這個(gè)方法函數(shù)與vue實(shí)例的順序還有關(guān)系。如果寫在vue（）的后面，下面就會(huì)執(zhí)行，后判斷。
如下圖所示：
這樣寫，當(dāng)然是可以執(zhí)行的路由跳轉(zhuǎn)判斷的，但是當(dāng)我們直接在瀏覽器的地址欄里直接輸入我們要跳轉(zhuǎn)的
完整路由信息的時(shí)候，這個(gè)路由跳轉(zhuǎn)就不會(huì)被判斷了。如下圖所示：
如果把路由驗(yàn)證寫到VUE實(shí)例的前面，就不會(huì)出現(xiàn)這樣的問題了，這樣就會(huì)先進(jìn)行路由判斷，再進(jìn)行執(zhí)行實(shí)例里邊的內(nèi)容了。
代碼順序如下所示：
響應(yīng)攔截：比如在根實(shí)例中通過checkLogin（）這個(gè)方法去判斷，登錄信息 的狀態(tài)，加入登錄超時(shí)，則進(jìn)行響應(yīng)攔截，代碼如下。
var app=new Vue({ el: '#app', router, store, created(){ checkLogin().then(function (res) { if(res.data&&res.data.code==1){ store.commit('login',true); } else{ router.push('/watchHouse-css'); } }) }, template: '<App/>', components: { App }})//響應(yīng)攔截器axios.interceptors.response.use(function(res){ //如果是未登錄 if(res.data&&res.data.code==2){ app.$alert('登錄用戶已超時(shí)，請(qǐng)重新登錄', '提示', { confirmButtonText: '確定', type:'warning', closeOnClickModal:false, callback: action => { router.push('/watchHouse-css') } }); } return res;},function(err){ return Promise.reject(err);}) 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
