Vue项目中添加锁屏功能实现思路
2018-06-29 16:32
671 查看
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项目中添加锁屏功能实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章推荐
- js代码实现填写简历时“添加项目经历”功能
- PHP开发的一个小小项目,记录下实现思路(附上实现功能的示例代码)(二)
- vue项目实现表单登录页保存账号和密码到cookie功能
- vue.js 实现输入框动态添加功能
- 【SSH网上商城项目实战12】添加和更新商品功能的实现
- 【业务】Vue项目里利用md5的来实现一个权限系统的思路记录
- C项目开发—通讯录(二) 初始化、查看、添加功能实现
- vue项目实现记住密码到cookie功能(附源码)
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- java Web项目实践之7 添加功能、精确查询功能的设计及实现
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现
- SSH框架网上商城项目第9战之添加和更新商品类别功能实现
- vue项目中实现图片预览的公用组件功能
- Vue项目数据动态过滤实践及实现思路
- vue实现2048小游戏功能思路详解
- 添加好友功能实现思路
- vue项目实现记住密码到cookie功能示例(附源码)
- BOS项目练习(定区添加及查询,Hessian入门,基于hessian实现定区关联客户功能)
- vue实现添加删除,筛选,还有自定义全局过滤器的功能
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现