这是一个在操作系统里比较常见的功能,但在web里实现,有哪些需要注意的呢?
1、如何真正的实现锁屏?
2、如何避免通过技术手段绕过锁屏?
我个人总结出2点需要特别注意的地方,下面就分别进行分析。
第一点,“如何真正的实现锁屏”,浏览器有个特性,就是可以多开窗口(或tab标签页),这就意味着单纯的靠js和css进行html对象的操作,实现隐藏是不够的,因为如果用户依旧处于登入状态,其他人只需重新开个页面,或者刷新一下,就又变回未锁屏状态了。所以,第一点的解决办法就是,前端通过js和css进行html对象操作的同时,后端需要将当前用户登出,这样用户就处于登出状态了,并且通过锁屏界面解锁登录后,是可以继续之前的操作的。
第二点,“如何避免通过技术手段绕过锁屏”,如果上一点已经解决,那他人已经无法通过刷新或重新打开窗口绕过锁屏,但还有一种方法,就是通过浏览器自带的一些调试工具,比如chrome的“开发者工具”,firefox的“firebug”,这些可以动态的修改对象元素,做前端开发的一定不陌生。要避免这一问题,解决办法就是在锁屏的时候,创建一个函数实时进行指定对象的检测,检测的指标有,对象是否存在,是否处于隐藏状态,位置是否有变动等。
针对第二点,我做了一个简单的demo,大家可以玩玩,当点击“开启锁屏”后,在不点击“退出锁屏”按钮,尝试使用浏览器的开发者工具,让“开启锁屏”界面重现出来。