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

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

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

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

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

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