页面锁屏功能，当我们暂时离开电脑时为了防止他人查阅我们的网站内容，我们可以将页面进行锁定，只有输入正确的解锁密码方可继续访问。当然这里我们也要验证路由跳转，当页面处于锁定状态时无法跳转页面。

?锁屏功能实现思路

1，在页面中设置锁屏密码

2，通过vuex将锁屏密码和锁屏状态存储起来

3，由于vuex在页面刷新后会丢失状态，所以这里我们还需借用sessionStorage存储锁屏密码和状态

4，鉴于锁屏密码存在sessionStorage，所以我们在存之前先对密码进行md5加密

5，解锁时匹配sessionStorage中的密码，当密码符合时解锁返回原页面

6，为防止通过路由跳转，在路由中进行进行锁屏状态和页面验证，当状态为解锁状态时方可进行路由跳转。

锁屏功能实现

在页面中添加锁屏图标及设置锁屏密码弹窗，点击锁屏图标时弹出锁屏密码输入框。下面是前端代码，利用element-ui中的el-dialog元素快速实现弹窗：

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

引入md5加密功能，由于我们将锁屏密码存在了 sessionStorage中（明码那就没意义了），所以在存储之前我们需要将密码先进行加密，这样密码就不会被暴露出去了。Vue中实现md5加密很简单，直接安装js-md5插件就可以轻松的实现密码加密。

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

在vuex中定义好了锁屏状态和锁屏密码，我们就开始实现功能了。先是锁屏功能，输入密码之后将密码加密并存入Vuex和sessionStorage中并将页面跳转到锁屏页面。通过mapGetters、mapActions获取Vuex中的属性和方法，然后通过this.$store.dispatch调用相应的方法来实现属性的修改。

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

到这里我们的锁屏功能就实现了，但是这里还有个漏洞，那就是只要用户修改URL还是可以根据路由实现页面跳转，这样的话就没达到我们锁屏的目的，所以这里我们还要在增加一个路由验证功能，在跳转前对锁屏状况进行验证，如果处于锁屏状况就不允许路由跳转其他页面。这个我们可以在router.beforeEach中添加验证功能，读取Vuex中的锁屏状态并进行判断即可。

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

更多Vue实战技巧可以参考我的专栏：Vue实战系列