詳解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是判斷操作，如果為空，表示放行。

##跳到登入的介面。 '/ToolCompute'，如果沒有登入的話，跳到登入頁面。

if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
 next({ path: '/login' })
}

要注意的是，路由驗證這個方法函數與vue實例的順序還有關係。 ##如下圖所示：

這樣寫，當然是可以執行的路由跳轉判斷的，但是當我們直接在瀏覽器的網址列裡直接輸入我們要跳轉的

完整路由資訊的時候，這個路由跳轉就不會被判斷了。如果把路由驗證寫到VUE實例的前面，就不會出現這樣的問題了，這樣就會先進行路由判斷，再進行執行實例裡邊的內容了。

##回應攔截：例如在根實例中透過checkLogin（）這個方法去判斷，登入資訊的狀態，加入登入逾時，則進行回應攔截，程式碼如下。

#

if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
 next({ path: '/login' })
}

相關推薦：

vue中的計算屬性的使用方法

Vue .js劃分元件的實作方法介紹

Vue 方法與事件處理的問題

以上是詳解vue中路由驗證和相應攔截使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！