这篇文章主要为大家详细介绍了vue路由跳转时判断用户是否登录功能的实现,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转。
简单用vuex表示一下,不会可以自己去官网多看看;
代码如下:
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;
}
};
代码如下:
this.$store.commit(‘changeLogin‘,‘100‘)
//登录后改变登录状态 isLogin = 100 ;
在你的路由入口加上导航钩子,具体什么意思看代码;
代码如下:
{ path: ‘/admin‘,
component: Admin,
meta:{auth:true} // 设置当前路由需要校验 不需要校验的路由就不用写了;不要问为什么,自己去看官网
}
代码如下:
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()
}
})
以上这篇vue路由跳转时判断用户是否登录功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/3587-0.html
注:关于vue路由跳转时判断用户是否登录功能的实现的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。