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项目中添加锁屏功能实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
继续阅读与本文标签相同的文章
-
Win10系统竟自带了表情包?你知道在哪吗?
2026-05-15栏目: 教程
-
中国芯片研究再获国际顶会最佳论文提名!清华魏少军、刘雷波团队出品
2026-05-15栏目: 教程
-
全网“传奇手游”相关搜索排名TOP100 全网“传奇手游”相关搜索排行榜
2026-05-15栏目: 教程
-
又一国产巨头崛起!19天狂建1367个5G基站,日韩始料不及
2026-05-15栏目: 教程
-
恩平“两线合一”改革试点全面完成家计入户调查,建立数据库
2026-05-15栏目: 教程
