vue 锁屏功能开发

一.锁屏功能实现思路
1.在页面中设置锁屏密码
2.通过vuex将锁屏状态存储起来
3.由于vuex在页面刷新后会丢失状态,所以需要借用localStorage存储锁屏状态
4.解锁时匹配设置的锁屏密码时解锁返回锁屏前的页面
5.因为要保证用户在点击锁屏前的操作所以选择遮罩来实现锁屏;
6.用户忘记锁屏密码可以到login页面重新登录
二.锁屏功能的实现
1.锁屏密码未设置默认为000000，可以点击右上角的头像，在弹出的菜单中选择个人中心，点击基本信息右侧的编辑图标，之后在锁屏密码中输入要设置的锁屏密码点击保存即可完成设置
2.在Vuex中定义锁屏的状态属性，创建对应的state，实现对锁屏状态的读取写入和清除功能。
state: {
isLock:false
},
getters: {
isLock:state=>state.isLock,
},
mutations: {
SET_LOCK(state,action){
state.isLock=true
localStorage.setItem('isLock',state.isLock)
},
CLEAR_LOCK(state,action){
state.isLock=false
localStorage.removeItem('isLock')
}
}
3.添加锁屏页面，该页面提供输入密码和退出登录功能
4.解锁功能，只有当输入的密码和我后台设置的锁屏密码一致后进入锁屏前的页面
this.$api.get('/api/User/GetUserLockPassword',{password:this.passwd},(response)=>{
if(response.code==200){
this.passwd=''
this.passwdError=false
this.$store.state.isLock=false
localStorage.setItem('isLock',false)
this.$store.commit('CLEAR_LOCK')
}else if(response.code==666){
this.passwd=''
this.errormessage="解锁密码错误，请重新输入"
this.passwdError=true
}
});

 

其实就是在index页  import一个子组件vue  设置为全屏  通过以上状态来控制是否显示，easy