詳解vue中路由驗證和相應攔截使用方法

在web項目中，經常需要根據是否登入進行路由的驗證和相應的攔截。本文主要為大家詳細介紹了vue中路由驗證和相應攔截的使用，具有一定的參考價值，感興趣的小夥伴們可以參考一下，希望能協助到大家。

首先，在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);})