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

小云云
リリース: 2023-03-17 21:44:02
オリジナル
1948 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!