Determine whether the user is logged in when Vue route jumps

Determine whether the user has logged in. If not logged in, jump to the login route. If logged in, jump normally. This article mainly brings you an implementation of the function of determining whether the user is logged in when Vue routing jumps. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. First, give a status before and after the user logs in to identify whether the user is logged in (it is recommended to use vuex);

Simply use vuex to express it. If you don’t know, you can go to the official website to see more. Look;

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. Change the login status when the user logs in;

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

3. Here comes the key point;

Add a navigation hook to your routing entry, what exactly is it? The meaning depends on the code;

1. Set the route that needs to be verified

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

  }

2. Route jump and verification

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

Have you learned it? Hope it helps everyone.

Related recommendations:

Example to explain the WeChat applet’s function of obtaining authorized user login with mobile phone number

thinkphp verification code login function Implementation example

ThinkPHP implementation of login and logout function code details

The above is the detailed content of Determine whether the user is logged in when Vue route jumps. For more information, please follow other related articles on the PHP Chinese website!