vue ermittelt, ob der Benutzer angemeldet ist

Dieses Mal bringe ich Ihnen Vue, um festzustellen, ob der Benutzer angemeldet ist. Was sind die Vorsichtsmaßnahmen für Vue, um festzustellen, ob der Benutzer angemeldet ist? Das Folgende ist ein praktischer Fall, nehmen wir einen sehen.

Beurteilen Sie, ob sich der Benutzer angemeldet hat. Wenn er nicht angemeldet ist, springen Sie zur Anmelderoute . Wenn Sie angemeldet sind, springen Sie normal.

1. Geben Sie zunächst einen Status vor und nach der Benutzeranmeldung ein, um festzustellen, ob der Benutzer angemeldet ist (vuex wird empfohlen);

Verwenden Sie einfach vuex, um es auszudrücken. Wenn Sie es nicht wissen, können Sie auf der offiziellen Website mehr sehen.

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

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

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

Drei wichtige Punkte sind hier

Fügen Sie den Haken Navigation zu Ihrem Routing-Eintrag hinzu

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

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

Zweiter Routensprung und Verifizierung

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonvue ermittelt, ob der Benutzer angemeldet ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!