Vue项目中添加锁屏功能实现思路


Posted in Javascript onJune 29, 2018

1. 实现思路

( 1 ) 设置锁屏密码
( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage)
( 3 ) vuex设置 SET_LOCK state.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 ) 密码存localStorage setStore是自己封装的方法

SET_LOCK_PASSWD: (state, lockPasswd) => {
  state.lockPasswd = lockPasswd
  setStore({
  name: 'lockPasswd',
  content: state.lockPasswd,
  type: 'session'
  })
 },

( 3 ) vuex设置 SET_LOCK state.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项目中添加锁屏功能实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 #Javascript
Vue表单demo v-model双向绑定问题
Jun 29 #Javascript
vue底部加载更多的实例代码
Jun 29 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JScript的条件编译
2007/05/29 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
javascript实现智能手环时间显示
2020/09/18 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python实现爬取图书封面
2018/07/05 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
新电JAVA笔试题目
2014/08/31 面试题
Ejb技术面试题
2015/04/29 面试题
机关门卫制度
2014/02/01 职场文书
yy生日主持词
2014/03/20 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
浅析Python中的套接字编程
2021/06/22 Python