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

解锁

引入依赖。vue+element-ui

1
2
3

<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

1	<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";
    }
  }