1. 开始
web开发中,常有一些功能仅希望对开发、测试人员等一小部分人展示,比如测试一个小程序项目中,想让测试人员快速复制当前对应的h5页面,这时候如果页面是必须登录的,我们可以借助vconsole,然后维护一个白名单配置,在进行中拉取配置,然后展示即可。
如果项目不是必须登录的,比如新闻、博客网站,或者需要这项功能的人很多,维护白名单太费时费力,就需要另一种办法。
这里介绍一种基于摩斯密码的页面加密方式,这里的加密其实是隐藏页面某些信息,也可以将其扩展,进行其他的操作,比如发送额外的请求、管理员的切换、状态的转变等。
2. 实现方式
简单来说,就是把用户的点击和长按分别当成点信号和长信号,也可以理解为计算机中的0和1,当用户一段时间内的输入符合密码规则时,视为解密成功,进行相应的操作。
这里的细节点就是维护密码数组和当前正在匹配的位置,流程图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c7d96a12c119131cb6f24ad315502e05.png)
3. 延伸
3.1. 多端适配
对于web项目,可以传入选择器,由JS动态监听事件,对于小程序,则需要在tap和longpress事件中,手动调用morsePwd中的相应的方法。
web项目使用方式如下:
<script>
export default {data() {retu