Déterminer si l'utilisateur est connecté lorsque la route Vue saute

En jugeant si l'utilisateur est connecté, s'il n'est pas connecté, passez à la route de connexion, s'il est connecté, sautez normalement. Cet article vous apporte principalement une implémentation de la fonction permettant de déterminer si l'utilisateur est connecté lorsque le routage Vue saute. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Tout d'abord, donnez un statut avant et après la connexion de l'utilisateur pour identifier si l'utilisateur est connecté (il est recommandé d'utiliser vuex

Utilisez simplement vuex pour l'exprimer) ; Sinon, vous pouvez aller sur le site officiel pour en voir plus.

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. Modifiez le statut de connexion lorsque l'utilisateur se connecte

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

3. Voici le point clé ;

Ajoutez la navigation à votre entrée de routage Hook, qu'est-ce que cela signifie dépend du code ;

1 Définissez l'itinéraire qui doit être vérifié

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

  }

<.>2. Saut d'itinéraire et vérification

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

Tout le monde peut déjà apprendre ? J'espère que cela aide tout le monde.

Recommandations associées :

Un exemple de l'applet WeChat obtenant la fonction de connexion de l'utilisateur autorisé par numéro de téléphone mobile

vérification thinkphp Exemple d'implémentation de la fonction de connexion au code

Implémentation ThinkPHP des détails du code de la fonction de connexion et de déconnexion

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!