vue路由守卫+登录态管理实例分析

2023-08-23 05:56:05 171

本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考，具体如下：

在路由文件需要守卫的path后面加上meta

{path:'/home',component:home,meta:{requireAuth:true}}

在main.js里面加上

//路由守卫
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(to.meta.requireAuth){//判断该路由是否需要登录权限
if(JSON.parse(localStorage.getItem('islogin'))){//判断本地是否存在access_token
next();
}else{
next({
path:'/login'
})
}
}
else{
next();
}
/*如果本地存在token则不允许直接跳转到登录页面*/
if(to.fullPath=="/login"){
if(JSON.parse(localStorage.getItem('islogin'))){
next({
path:from.fullPath
});
}else{
next();
}
}
});

其中islogin是登录态，就是trueorfalse，true表示登录，false表示未登录，存放在localStorage里面，因为localStorage里面只能存字符串，所以存进去的时候需要localStorage.setItem(‘islogin',JSON.stringify(islogin));将islogin变为String类型，取出来的时候需要将islogin转化为Boolean类型，就比如JSON.parse(localStorage.getItem(‘islogin'))这样。

那么还有一个问题，就是islogin登录态的管理，vue不能实时监测localStorage的变化，需要实时监测islogin的变化来在页面显示登录还是已经登录，我用的是vuex+localStorage来管理islogin。展示部分代码

//store.js中
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{
//是否登录判断
islogin:''
},
mutations:{
login:(state,n)=>{
//传入登录状态islogin
letislogin=JSON.parse(n);
localStorage.setItem('islogin',JSON.stringify(islogin));
console.log(islogin);
state.islogin=islogin;
}
}
}

在需要改变登录态的页面只要触发上面这个login方法就可以了

//这里是登录
login(){
letflag=true；
this.$store.commit('login',flag);
this.$router.push("/home");
console.log("登录成功");
}
//这里是退出登录
exit(){
letflag=false；
this.$store.commit('login',flag);
this.$router.push("/login");
console.log("退出登录");
}

登录注册部分样式参考的element-ui

登录注册


.el-button--primary{
color:#fff;
background-color:rgba(254,112,26,0.8);
border-color:rgba(254,112,26,0.9);
}
.el-button:focus{
color:#333;
background-color:rgba(255,255,255,0.1);
border-color:#dcdfe6;
}
.el-button:hover{
color:rgba(254,112,26,1);
background-color:rgba(255,255,255,0.1);
border-color:rgba(254,112,26,0.9);
}
.el-button--primary:hover{
color:#fff;
background-color:rgba(254,112,26,0.8);
border-color:rgba(254,112,26,0.9);
}
.el-button--primary:focus{
color:#fff;
background-color:rgba(254,112,26,0.8);
border-color:rgba(254,112,26,0.9);
}
.register,
.login{
margin-top:100px;
margin-bottom:100px;
padding:40px0px40px0;
background-color:#fff;
width:600px;
margin:100pxauto;
border-radius:8px;
box-shadow:0px0px100pxrgba(0,0,0,.1);
}
.register.register-title,
.login.login-title{
font-size:1.65rem;
line-height:60px;
font-weight:bold;
white-space:nowrap;
margin-bottom:16px;
color:#555;
/*color:rgba(254,112,26,0.8);*/
}
.register-ruleForm,
.login-ruleForm{
width:500px;
margin:0auto;
padding:0px100px0px0;
}
.login.toregister{
cursor:pointer;
}
/*注册*/

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue路由守卫+登录态管理实例分析

热门推荐

随机推荐