Bestimmen Sie, ob der Benutzer angemeldet ist, wenn die Vue-Route springt

Beurteilen Sie, ob sich der Benutzer angemeldet hat. Wenn er nicht angemeldet ist, springen Sie zur Anmelderoute. Wenn Sie angemeldet sind, springen Sie normal. In diesem Artikel wird hauptsächlich die Implementierung der Funktion beschrieben, mit der ermittelt wird, ob der Benutzer angemeldet ist, wenn das Vue-Routing springt. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Geben Sie zunächst einen Status vor und nach der Anmeldung des Benutzers ein, um festzustellen, ob der Benutzer angemeldet ist (es wird empfohlen, vuex zu verwenden). Wenn nicht, können Sie auf der offiziellen Website nachsehen.

2. Ändern Sie den Anmeldestatus, wenn sich der Benutzer anmeldet.

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

var state = {
  isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
};

const mutations = {
  changeLogin(state,data){
    state.isLogin = data;
  }

};

Der entscheidende Punkt:

 this.$store.commit(‘changeLogin‘,‘100‘)   
 //登录后改变登录状态 isLogin = 100 ；

Navigation zu Ihrem Routing-Eintrag hinzufügen. Was das bedeutet, hängt vom Code ab

Legen Sie die Route fest, die überprüft werden muss

2. Routensprung und Verifizierung

{ path: ‘/admin‘, 
  component: Admin,
  meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了；不要问为什么，自己去看官网

  }

Jeder lernt schon? Ich hoffe, es hilft allen.

router.beforeEach((to,from,next) => {   

if(to.matched.some( m => m.meta.auth)){     

// 对路由进行验证     
if(store.state.isLogin==‘100‘) { // 已经登陆       
next()   // 正常跳转到你设置好的页面     
}
else{       

// 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；

　　 　　　　next({path:‘/login‘,query:{ Rurl: to.fullPath} })
 　　　　　} 
　　　　}else{ 
　　　　　　next() 
　　} 
})

Verwandte Empfehlungen:

Ein Beispiel dafür, wie das WeChat-Applet die Anmeldefunktion für autorisierte Benutzer über die Mobiltelefonnummer erhält

thinkphp-Überprüfung Code-Anmeldefunktion – Implementierungsbeispiel

ThinkPHP-Implementierung der Anmelde- und Abmeldefunktionscodedetails

Das obige ist der detaillierte Inhalt vonBestimmen Sie, ob der Benutzer angemeldet ist, wenn die Vue-Route springt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!