Vue项目中添加锁屏功能实现思路
1.实现思路
(1)设置锁屏密码
(2)密码存localStorage（本项目已经封装h5的sessionStorage和localStorage）
(3)vuex设置SET_LOCKstate.isLock=true(为true是锁屏状态)
(4)在路由里面判断vuex里面的isLock（为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以）
（1）设置锁屏密码
handleSetLock(){
this.$refs['form'].validate(valid=>{
if(valid){
this.$store.commit('SET_LOCK_PASSWD',this.form.passwd)
this.handleLock()
}
})
},
（2)密码存localStoragesetStore是自己封装的方法
SET_LOCK_PASSWD:(state,lockPasswd)=>{
state.lockPasswd=lockPasswd
setStore({
name:'lockPasswd',
content:state.lockPasswd,
type:'session'
})
},
(3)vuex设置SET_LOCKstate.isLock=true同时存在store里面
SET_LOCK:(state,action)=>{
state.isLock=true
setStore({
name:'isLock',
content:state.isLock,
type:'session'
})
},
(4)在路由里面判断vuex里面的isLock
if(store.getters.isLock&&to.path!==lockPage){
next({
path:lockPage
})
NProgress.done()
源码地址
总结
以上所述是小编给大家介绍的Vue项目中添加锁屏功能实现思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。