Vue实现web网页锁屏功能

页面锁屏功能听起来很高大，其实没Y用，摸鱼混时间倒是挺不错的。。。
创建一个 lockScreen.vue 页面 设置 router 一级路由
项目有角色权限的注意了 路由不要设置错了
当用户进入 lockScreen.vue 页面 把锁屏密码存起来
存在VueX 里面 因为也main刷新 Vuex 数据也会丢失 我们要在window.sessionStorage.setitem(“Secret”,password) 或者 window.localStorage.setitem(“Secret”,password) 也存一份
用户安全的的话 我们还是加密一下比较好 md5 加密就行 毕竟存在前端 已经无所谓了

安装MD5

npm install --save js-md5

在main.js 引入
import md5 from 'js-md5'; 
Vue.prototype.$md5 = md5

yarn 安装
yarn add md5 -s

在main.js 当中 this$md5("hello word")   //这样就可以加密了，还是很方便的

路由权限 配置

router.beforeEach((to, from, next) => {  // 路由守卫 拦截 
    var Secret= sessionStorage.getItem('Secret') 获取当用户密码
 // 判断当前页面是否是 LockScreen 是直接进去
    if (to.matched[0] && (to.matched[0].path == "/Login" || to.matched[0].path ==  "/LockScreen")) { // 是否登录也买你 防止死循环
        next()
    } else {
        if (window.sessionStorage.getItem("Secret")) {  // 判断用户已经锁屏 有密码 肯定是已经锁屏了
            next('/LockScreen')     // 只要有密码 无论进入什么页面都跳转  “/LockScreen” 浏览器返回建也不行
        } else {

           //  这里就是一些正常角色权限判断，代码就不放了，怕乱 
        }
    }
})

到这一步 无论 用户进入什么 页面都会跳转到 “/LockScreen” 页面 刷新 返回 都回不去了 现在页面锁屏功能就已经好了
是不是很简单

页面锁屏好了 是不是还要有页面解锁功能啊。。。
直接校验 加密过后的铭文

 if (this.$md5(password) == window.sessionStorage.getItem("Secret")) {
                    window.sessionStorage.removeItem("Secret")
                     this.$router.push("/")
                    window.sessionStorage.removeItem("lockScreenPath")
                } else {
                    this.$message.error('锁屏密码错误!');
                }

但是这样好像有点问题，就是我每次接触锁屏的时候返回的都有首页，虽然功能是完成了，但是用户体验并不是很好

我从什么页面 ==> “/LockScreen” 锁屏页面 ==> 我原来的页面
我们要把 我从什么页面存起来
还是 router.beforeEach

beforeRouteEnter(to, from, next) {
            next(vm => {
                // 这里需要判断一下 是否为首页  因为页面刷新  from.path  默认为 / 
如果不判断就会覆盖我们原来的路由
                if (from.path != "/") {
                    window.sessionStorage.setItem("lockScreenPath", from.path)
                }
            })
        },

页面解锁代码

if (this.$md5(ispassword) == window.sessionStorage.getItem("Secret")) {
                    window.sessionStorage.removeItem("Secret")
                    if (window.sessionStorage.getItem("lockScreenPath")) {
                        this.$router.push(window.sessionStorage.getItem("lockScreenPath"))
                    } else {
                        this.$router.push("/")
                    }
                    window.sessionStorage.removeItem("lockScreenPath")
                } else {
                     this.$message.error('提示，密码错误');