Vue でのルーティング検証と対応するインターセプト方法の詳細な説明

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' })
}

例: ルート '/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 インスタンスの前にルーティング検証を記述すると、このような問題は発生しません。このようにして、最初にルーティングが判断されてから、インスタンス内のコンテンツが実行されます。

コードシーケンスは次のとおりです。

応答インターセプト: たとえば、ルート インスタンスで、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: &#39;<App/>&#39;,
 components: { App }
})


//响应拦截器
axios.interceptors.response.use(function(res){
 //如果是未登录
 if(res.data&&res.data.code==2){
 app.$alert(&#39;登录用户已超时，请重新登录&#39;, &#39;提示&#39;, {
  confirmButtonText: &#39;确定&#39;,
  type:&#39;warning&#39;,
  closeOnClickModal:false,
  callback: action => {
  router.push(&#39;/watchHouse-css&#39;)
  }
 });
 }
 return res;
},function(err){
 return Promise.reject(err);
})

関連する推奨事項:

vue

で計算されたプロパティを使用する方法 Vue.js 分割コンポーネントの実装方法の紹介

Vue メソッドとイベント処理の問題点

以上がVue でのルーティング検証と対応するインターセプト方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。