在web項目中，經常需要根據是否登錄進行路由的驗證和相應的攔截。
首先，在vuex里的store.js里邊寫一個存放登錄狀態，代碼如下
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
}
}
})
路由驗證：
路由驗證用 router.beforeEach( (to, from, next) => { }
這里的to代表要去的路由指向，from是指從哪個路由跳轉過來的，next是判斷操作，如果為空，表示放行。
比如：下一跳的路由為‘/watchHouse'或者‘/AgentMsg' ，如果沒有登錄的話，通過代碼 next ({path: '/login'})
跳轉到登錄的界面。代碼如下：
if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
next({ path: '/login' })
}
比如：在路由‘/my'下，要跳往 ‘/ToolCompute'，如果沒有登錄的話，跳轉到登錄頁面。代碼如下：
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' })
}
}
})
需要注意的是，路由驗證這個方法函數與vue實例的順序還有關系。如果寫在vue（）的后面，下面就會執行，后判斷。
如下圖所示：
這樣寫，當然是可以執行的路由跳轉判斷的，但是當我們直接在瀏覽器的地址欄里直接輸入我們要跳轉的
完整路由信息的時候，這個路由跳轉就不會被判斷了。如下圖所示：
如果把路由驗證寫到VUE實例的前面，就不會出現這樣的問題了，這樣就會先進行路由判斷，再進行執行實例里邊的內容了。
代碼順序如下所示：
響應攔截：比如在根實例中通過checkLogin（）這個方法去判斷，登錄信息 的狀態，加入登錄超時，則進行響應攔截，代碼如下。
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 }
})
//響應攔截器
axios.interceptors.response.use(function(res){
//如果是未登錄
if(res.data&&res.data.code==2){
app.$alert('登錄用戶已超時，請重新登錄', '提示', {
confirmButtonText: '確定',
type:'warning',
closeOnClickModal:false,
callback: action => {
router.push('/watchHouse-css')
}
});
}
return res;
},function(err){
return Promise.reject(err);
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
