Web プロジェクトでは、ログインしているかどうかに基づいて、ルーティングの検証とそれに対応する傍受が必要になることがよくあります。この記事では主に Vue でのルーティング検証とそれに対応するインターセプトの使用法について詳しく紹介します。興味のある方は参考にしていただければ幸いです。 E まず、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) = & gt; を使用します。 { } using ' using ' to ' to ' ' ' ' s ' through ' through ' through ' to d ‐ ‐ to は行きたいルート、どのルートからジャンプするかを表します。次に操作を決定します。空の場合は解放を意味します。 例: ネクストホップ ルートは '/watchHouse' または '/AgentMsg' です。ログインしていない場合は、次のコードを使用します ({path : '/login'})
ログイン インターフェイスにジャンプします。 コードは次のとおりです。
if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) { next({ path: '/login' }) }
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' }) } } })
コードシーケンスは次のとおりです。
応答インターセプト: たとえば、ルート インスタンスで、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); })
vue
で計算されたプロパティを使用する方法 Vue.js 分割コンポーネントの実装方法の紹介
Vue メソッドとイベント処理の問題点以上がVue でのルーティング検証と対応するインターセプト方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。