HTML页面加锁

一个HTML页面加锁、解锁功能。

解锁

引入依赖。vue+element-ui

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

privatePoint方法，在跳转前要求输入密码。密码验证成功（相当于登录成功，在本地保存登录状态），保存字段pass=1在本地的localStorage。

pass为1，表示登录成功。其他值表示未登录即没有通过密码验证。

  privatePoint() {
    if (window.localStorage.getItem("pass") != "1") {
      this.$prompt('该文件已被加密，请输入授权口令！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({
        value
      }) => {
        if (value == "0803") {
          this.$message({
            type: 'success',
            message: '口令正确，欢迎访问！'
          });
          window.localStorage.setItem("pass", "1");
          setInterval(() => {
            window.location.href = "note/index.html";
          }, 1 * 1000);
        } else {
          this.$message({
            type: 'error',
            message: '口令有误！'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    } else {
      window.location.href = "note/index.html";
    }
  }

加锁

引入依赖。vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

clearStorage方法，用于清除本地的localStorage中保存的字段pass=1，并跳转回首页。

在钩子函数mounted中，判断本地的localStorage中是否保存有字段pass=1，若没有（未登录状态）则跳转回首页。

  methods: {
      clearStorage() {
        localStorage.removeItem("pass");
        window.location.href = "../index.html";
      }
    },
    mounted() {
      var pass = window.localStorage.getItem("pass");
      if (pass != "1") {
        window.location.href = "../index.html";
      }
    }