Vue实现web网页锁屏功能
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 = md5yarn 安装
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('提示，密码错误');
Vue实现web网页锁屏功能相关推荐
- centos linux怎么关闭锁屏时间,【Centos】Centos7.5取消自动锁屏功能
00. 目录 @ 01. 问题描述 Centos7.5系统在用户闲置一段时间(默认为5分钟)后,会启动屏幕保护程序(默认的屏保为黑屏),并要求重新输入密码才能回到原来桌面.如果是管理员,建议开启自动锁 ...
- 多御安全浏览器锁屏功能上线，详解设置浏览器锁屏的方法
2022年8月13日,多御安全浏览器锁屏功能正式上线啦!此次最新版本android版 1.7.5增加了密码锁屏功能,旨在保护用户的隐私安全和数据安全,让隐私保护更进一步.那么这个锁屏功能在哪里,我们应 ...
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- 【Centos】Centos7.5取消自动锁屏功能
00. 目录 文章目录 00. 目录 01. 问题描述 02. 问题分析 03. 解决办法 04. 附录 01. 问题描述 Centos7.5系统在用户闲置一段时间(默认为5分钟)后,会启动屏幕保护程 ...
- java网页截图_Java实现的简单网页截屏功能示例
本文实例讲述了Java实现的简单网页截屏功能.分享给大家供大家参考,具体如下: package awtDemo; import java.awt.AWTException; import java.a ...
- oracle密码锁屏时间,Oracle Linux OEL7 如何关闭屏保和锁屏功能
Oracle Linux OEL7 如何关闭屏保和锁屏功能 为每一个单独用户设置屏保和锁屏时间: $ gsettings set org.gnome.desktop.session idle-dela ...
- CentOS系统里如何正确取消或者延长屏幕保护自动锁屏功能（图文详解）
不多说,直接上干货! 对于我这里想说的是,分别从CentOS6.X 和 CentOS7.X来谈及. 1. 问题:默认启动屏幕保护 问题描述: CentOS系统在用户闲置一段时间(默认为5分钟)后, ...
- Android系统永不熄屏和取消开机锁屏功能
Android系统取消开机锁屏功能和永不熄屏 源码 frameworks/base/packages/SettingsProvider/src/com/android/providers/settin ...
- Android一键锁屏功能的实现
前不久换了部新手机,因为原来用的手机原装了一键锁屏的应用,用的还习惯,新手机上没有,就想着找一个装上,后来在网上搜了下一键锁屏的实现,自己拿来改了改,安装后感觉还可以.现在分享出来. 源码: 1. M ...
最新文章
- 从源码和内核角度分析redis和nginx以及java NIO可以支持多大的并发
- (转)I,P，B帧和PTS，DTS的关系
- seo网站营销与内容营销不可分割
- Javascript自定义事件功能与用法实例分析
- fortran还是python_Fortran 还有存在的必要吗？
- deepfake 图片_DeepFake克星来了！简单2步算法，造假图像无处可逃
- [2021.1.13多校省选模拟2]T1(动态规划/轮廓线dp）
- 作为开发，你对进程和线程能否区分开来呢？
- 第一章 Javscript的数据类型
- 用C语言显示所有Ascll表
- 服务器的上行带宽和下行带宽是什么意思
- python问题 Traceback (most recent call last)
- 原创科幻短篇《高考》
- c语言点亮共阴极数码管,课程设计-基于单片机的共阴极数码管显示电路.doc
- php小程序餐馆点餐订餐外卖系统
- Windows打印管理解决方案
- 解决winnt.h(389): error C2059: 语法错误:“；”
- 51单片机 ：5RET与RETI
- Android：展锐battery
- percona的安装、启动、停止