溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-19 11:43:53 來源：腳本之家 閱讀：152 作者：羞羞的鐵拳 欄目：web開發(fā)

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

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

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

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

比如：在路由‘/my'下，要跳往 ‘/ToolCompute'，如果沒有登錄的話，跳轉(zhuǎn)到登錄頁面。代碼如下：     

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)系。如果寫在vue（）的后面，下面就會(huì)執(zhí)行，后判斷。

如下圖所示：

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

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

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

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

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

代碼順序如下所示：

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

響應(yīng)攔截：比如在根實(shí)例中通過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í)，請重新登錄', '提示', {
  confirmButtonText: '確定',
  type:'warning',
  closeOnClickModal:false,
  callback: action => {
  router.push('/watchHouse-css')
  }
 });
 }
 return res;
},function(err){
 return Promise.reject(err);
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手