vue中路由驗(yàn)證和相應(yīng)攔截的使用詳解

更新時(shí)間：2017年12月13日 11:27:48 作者：羞羞的鐵拳

這篇文章主要為大家詳細(xì)介紹了vue中路由驗(yàn)證和相應(yīng)攔截的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在web項(xiàng)目中，經(jīng)常需要根據(jù)是否登錄進(jìn)行路由的驗(yàn)證和相應(yīng)的攔截。

首先，在vuex里的store.js里邊寫(xiě)一個(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)過(guò)來(lái)的，next是判斷操作，如果為空，表示放行。
      比如：下一跳的路由為‘/watchHouse'或者‘/AgentMsg' ，如果沒(méi)有登錄的話，通過(guò)代碼 next ({path: '/login'})

跳轉(zhuǎn)到登錄的界面。代碼如下：

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

比如：在路由‘/my'下，要跳往 ‘/ToolCompute'，如果沒(méi)有登錄的話，跳轉(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)系。如果寫(xiě)在vue（）的后面，下面就會(huì)執(zhí)行，后判斷。

如下圖所示：

這樣寫(xiě)，當(dāng)然是可以執(zhí)行的路由跳轉(zhuǎn)判斷的，但是當(dāng)我們直接在瀏覽器的地址欄里直接輸入我們要跳轉(zhuǎn)的

完整路由信息的時(shí)候，這個(gè)路由跳轉(zhuǎn)就不會(huì)被判斷了。如下圖所示：

如果把路由驗(yàn)證寫(xiě)到VUE實(shí)例的前面，就不會(huì)出現(xiàn)這樣的問(wèn)題了，這樣就會(huì)先進(jìn)行路由判斷，再進(jìn)行執(zhí)行實(shí)例里邊的內(nèi)容了。

代碼順序如下所示：

響應(yīng)攔截：比如在根實(shí)例中通過(guò)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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: