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