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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
fetch 如何实现请求数据
Dec 20 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JQuery跳出each循环的方法
2015/04/16 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Java中实现多态的机制
2015/08/09 面试题
应届生英语教师求职信
2013/11/05 职场文书
校本教研工作方案
2014/01/14 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
从事会计工作年限证明
2015/06/23 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android