vue项目之锁屏

题引

---

锁屏：该需求是指用户暂时离开时点击锁屏，用户无法跳转到其他页面，回来输入密码点击解锁
技术栈：vue+elementUI

解题

通过布尔类型 lockFlag 来控制样式，绑定事件名称 lockChange

当用户点击解锁时，弹出弹框让用户输入密码

由于从后台拿到的密码时MD5加密之后的结果，所以要在js中将用户输入的值和用户密码中的某一方处理一下
在 index.html 中引入md5压缩包

我的做法是将用户输入的密码进行加密（通过md5函数）和用户密码进行比对

md5(value)

以下是完整的事件代码，由于防止浏览器刷新页面，没有使用vuex来管理lockFlag，而是使用localStorage来存储变量

//页面锁定事件
lockChange(){          
     if(this.lockFlag){
         localStorage.setItem('lockFlag',0); 
         this.lockFlag = false
         this.$message({
             type: 'success',
             message: '页面锁定成功！'
         });
     }else{
         const uInfo = JSON.parse(localStorage.getItem("userInfo")); // 用户
         this.$prompt('', '请输入密码', {
             inputType:'password',
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             inputValidator: (value)=>{
                 let hash = md5(value)
                 return hash.toUpperCase()===uInfo.passwd
             },
             inputErrorMessage: '密码输入不正确'
             }).then(({ value }) => {
                 this.$message({
                     type: 'success',
                     message: '解锁成功'
                 });
                 localStorage.setItem('lockFlag',1); 
                 this.lockFlag = true
             }).catch(() => {});
     }
 }

项目中要控制不能跳转页面，需要在路由守卫中设置
main.js中

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const lockFlag = localStorage.getItem('lockFlag');
    if(lockFlag === '0'&&from.path!=="/"){  
   		 next(false)
    }else{
    	next()
    }
})

总结

做个记录