Explication détaillée de la vérification du routage et des méthodes d'interception correspondantes dans Vue

Dans les projets Web, la vérification du routage et l'interception correspondante sont souvent requises selon que vous êtes connecté ou non. Cet article présente principalement en détail l'utilisation de la vérification du routage et de l'interception correspondante dans Vue. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Tout d'abord, écrivez un store.js dans vuex pour stocker le statut de connexion. Le code est le suivant

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

Vérification de l'itinéraire :

La vérification de la route utilise router.beforeEach( (to, from, next) => Next est une opération de jugement. S'il est vide, cela signifie la libération. Par exemple : la route du saut suivant est '/ watchHouse' ou '/AgentMsg'. Si vous n'êtes pas connecté, utilisez le code suivant ({path: '/login'}. )


Accédez à l'interface de connexion. :

Par exemple : sous la route '/my', accédez à '/ToolCompute', si vous n'êtes pas connecté, accédez à la page de connexion. Le code est le suivant :

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

Code complet :

if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
 next({ path: '/login' })
}

Il convient de noter que la fonction de la méthode de vérification d'itinéraire est également liée à l'ordre de l'instance de vue. Si elle est écrite après vue(), ce qui suit sera exécuté, puis jugé

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

Comme indiqué. dans la figure ci-dessous :

Écrit comme ceci, bien sûr, un jugement de saut de routage peut être effectué, mais lorsque nous parcourons directement Lorsque nous entrons directement dans le

informations de routage complètes que nous voulons sauter dans la barre d'adresse du serveur, le saut d'itinéraire ne sera pas jugé, comme le montre la figure ci-dessous :

Si. la vérification de la route est écrite devant l'instance VUE, un tel problème ne se produira pas. De cette façon, la route sera jugée en premier, puis le contenu de l'instance sera exécuté >La séquence de code est la suivante : <. 🎜>

Interception de réponse : par exemple, dans l'instance racine, utilisez la méthode checkLogin() pour déterminer l'état des informations de connexion et ajoutez un délai d'interception de réponse, le. le code est le suivant :

Recommandations associées :

Comment utiliser les propriétés calculées dans vue

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

Introduction à la méthode d'implémentation des composants divisés Vue.js

Problèmes avec les méthodes Vue et la gestion des événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!