Detaillierte Erläuterung der Routing-Verifizierung und der entsprechenden Abfangmethoden in Vue

In Webprojekten sind häufig eine Routing-Verifizierung und entsprechendes Abfangen erforderlich, je nachdem, ob Sie angemeldet sind oder nicht. Dieser Artikel stellt hauptsächlich die Verwendung der Routing-Überprüfung und des entsprechenden Abfangens in Vue vor. Ich hoffe, dass er für alle hilfreich ist.

Schreiben Sie zunächst eine store.js in vuex, um den Anmeldestatus zu speichern. Der Code lautet wie folgt

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

Routenüberprüfung:

Routenüberprüfung verwendet router.beforeEach( (to, from, next) => Next ist eine Beurteilungsoperation. Wenn es leer ist, bedeutet es Freigabe. Beispiel: Die nächste Hop-Route ist '/ watchHouse' oder '/AgentMsg'. Wenn Sie nicht angemeldet sind, verwenden Sie als nächstes den Code ({Pfad: '/login'}).


Springen Sie zur Anmeldeoberfläche. Der Code lautet wie folgt :

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

Wie gezeigt in der Abbildung unten:

So geschrieben, natürlich kann eine Routing-Sprungbeurteilung durchgeführt werden, aber wenn wir direkt durchsuchen, geben wir

direkt ein Vollständige Routing-Informationen, die wir in die Adressleiste des Servers springen möchten, werden nicht bewertet, wie in der folgenden Abbildung gezeigt:

Wenn Da die Routenüberprüfung vor der VUE-Instanz geschrieben wird, tritt ein solches Problem nicht auf. Auf diese Weise wird zuerst die Route beurteilt und dann der Inhalt in der Instanz ausgeführt. >Die Codesequenz ist wie folgt 🎜>

Antwortabfangen: Verwenden Sie beispielsweise in der Root-Instanz die checkLogin()-Methode, um den Status der Anmeldeinformationen zu ermitteln, und fügen Sie ein Anmelde-Timeout-Antwortabfangen hinzu Der Code lautet wie folgt:

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

Einführung in die Implementierungsmethode der geteilten Komponenten von Vue.js

Probleme mit Vue-Methoden und Ereignisbehandlung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Routing-Verifizierung und der entsprechenden Abfangmethoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!