Vue实战055:WEB页面锁屏功能实现详解

 时间:2024-10-23 03:36:23

1、锁屏功能实现思路1,在页面中设置锁屏密码2,通过vuex将锁屏密码和锁屏状态存储起来3,由于vuex在页面刷新后会丢失状态,所以这里我们还需借用sessionStorage存储锁屏密码和状态4,鉴于锁屏密码存在sessionStorage,所以我们在存之前先对密码进行md5加密5,解锁时匹配sessionStorage中的密码,当密码符合时解锁返回原页面6,为防止通过路由跳转,在路由中进行进行锁屏状态和页面验证,当状态为解锁状态时方可进行路由跳转。

Vue实战055:WEB页面锁屏功能实现详解

3、在Vuex中定义锁屏状态和锁屏密码属性,创建对应的state、getters、mutations、actions属性,实现对锁屏状态和锁屏密码的读取、写入和清除功能。

Vue实战055:WEB页面锁屏功能实现详解

5、添加锁屏页面,定义好一个新的锁屏页面并定义好路由,当输入密码之后就跳转到该页面 ,一个简单的页面只提供输入解锁密码功能和退出登录功能即可。

Vue实战055:WEB页面锁屏功能实现详解

7、接着就是解锁功能,进入锁屏页面我们提供了输入解锁密码输入及验证功能,只有当输入的密码加密后和我们sessionStorage中存储的字符匹配时方可解锁页面并进行路由跳转,解锁成功后清除sessionStorage的属性即可。

Vue实战055:WEB页面锁屏功能实现详解

9、这里返回页面我指向了主页,如果你想返回到之前浏览的页面,那么在锁屏时就需要将当前的路由也存储起来,解锁的时候指向该路由即可啦。

  • 手工教程-6分bjd和服
  • 地平线5火山口拉力赛车相片挑战怎么完成
  • 如何交易原油期货
  • 怎么刷QQ飞车车队贡献?
  • 房贷利率4.25怎么算利息
  • 热门搜索
    荀子简介 怎么学好英语口语 美女照片大全 生死狙击武器大全 笔记本触摸板怎么开 作文摘抄大全 风景图片大全大图 床应该怎么摆放 霸气网名大全 孙权简介