Vue détermine si l'utilisateur est connecté

Cette fois, je vous apporterai vue pour déterminer si l'utilisateur est connecté. Quelles sont les précautions pour vue pour déterminer si l'utilisateur est connecté. Ce qui suit est un cas pratique, prenons un regarder.

En jugeant si l'utilisateur est connecté, s'il n'est pas connecté, passez à la connexion itinéraire , s'il est connecté, sautez normalement.

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

Utilisez simplement vuex pour l'exprimer. Si vous ne le savez pas, 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 ; dans

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

Trois points importants sont ici

Ajoutez le crochet Navigation à votre entrée de routage. Consultez le code pour la signification spécifique

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

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

Deuxième 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() 
  } 
})

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!