纯前端实现密码保护文件访问

场景：需要在纯前端的环境中让一组 JSON 文件只有通过输入正确的密码才能进行访问

在纯前端环境中基本上没有什么安全性可言所有东西都是硬编码在里面的，所以要实现以上功能我只能取个巧，利用随机目录名（前提是服务器禁止遍历目录名）然后把受保护的 JSON 放到该目录下来实现。顺着这个思路，我要做的就是输入一个密码，然后得到一个目录名，最后通过该目录名来访问受保护的 JSON 文件。

graph TD

开始(输入密码) --> 操作(中间操作)
操作 --> 结果(目录名)

加密

现在实现中间操作，在构建项目的时候需要生成并保存一个 JSON 对象（update_info.json）：

{
  "updateId": "",
  "updateTime": ""
}

对象的 updateTime 属性就是构建项目时的时间戳，而 updateId 就是则是时间戳和密码的MD5值（KEY） + 时间戳 组合计算的MD5值。

graph TD

时间戳1[时间戳（updateTime）] --> KEY
密码 --> KEY[KEY（MD5）]
KEY --> updateId[updateId（MD5）]
时间戳2[时间戳（updateTime）] --> updateId

而最重要的目录名则是 updateId + KEY 计算而成的MD5值。

graph TD

KEY[KEY（MD5）] --> 目录名[目录名（MD5）]
updateId[updateId（MD5）] --> 目录名[目录名（MD5）]

以上就是加密目录名生成过程，到时候把需要保护的 JSON 文件放到该目录下即可

解密

首先获取需要先去把 update_info.json 文件请求下来，然后解析出 updateId 和 updateTime。

graph TD
初始化(请求 update_info.json 文件)
初始化 --解析--> updateId[校验 updateId]
初始化 --解析--> updateTime

然后通过输入的密码和 updateTime 来计算出 KEY，通过这个 KEY 来在加上 updateTime 计算出来的 updateId 来和服务器返回的 updateId 进行对比，若一致则说明密码正确，否则密码错误。

密码正确后就可以通过 updateId + KEY 来计算出目录名，然后就可以访问受保护的 JSON 文件了

graph TD

开始(输入密码) --> KEY
updateTime1[updateTime] --> KEY

KEY --> updateId
updateTime2[updateTime] --> updateId

updateId -->判断updateId{判断计算出来的和 update_info 文件中的两个 updateId 是否一致}
判断updateId -- 不一致 --> 错误(密码错误)
判断updateId -- 一致 --> KEY2[KEY（MD5）]

updateId2[updateId（MD5）] --> 结果(目录名（MD5）)
KEY2 --> 结果
KEY2 --> 额外操作[存储 KEY]

在这期间如果密码输入错误，即计算出来的 updateId 与服务器返回的 updateId 不一致，那么强行使用 KEY 计算出来的目录名也必然时错误的

同时在校验成功后需要把 KEY 存储起来，后续就可以凭借着这个 KEY 来访问受保护的 JSON 文件，而不需要再次输入密码。并且密码也不会被存储到任何地方，仅参与一下 KEY 的计算

而且伴随着每次触发新的部署，时间戳也会同步更新，也就会生成新的 目录名，以前的 KEY 也会失效，所有的一切都是基于新的时间戳和密码计算出来的

这样一来也就达到了在纯前端的环境下实现用密码来保护资源文件的目的