Vue实现锁屏

需求：
公司的要求是实现点击锁屏按钮锁屏 和 无操作30分钟内锁屏 、在解锁后不能刷新页面
思路：

• 点击锁屏按钮锁屏 ： 使用一个遮罩层去遮住页面。
• 无操作30分钟内锁屏 ： 记录第一次点击时间和最后一次点击时间，两者之差是否大于30分钟
• 使用 js-md5对登陆密码进行加密

锁屏页面的样式

<template>
  <div class="screenBox" v-if="isCover">
    <div class="userInfo">
      <el-input
        v-model="userForm.newPw"
        placeholder="请输入登陆密码"
        style="width: 200px"
        type="password"
        @keyup.enter.native="unLock()"
      ></el-input>
      <div class="btn_class">
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-unlock"
          @click="unLock"
          >解锁</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import md5 from "js-md5";
export default {
  data() {
    return {
      userForm: {
        newPw: "",
      },
    };
  },
  computed: {
    ...mapGetters(["isCover","isLock"]),
  },
  methods: {
    ...mapActions(["clearLock", "logout"]),
    unLock() {
      let oldAuct = localStorage.getItem("XXXX");
      if (this.userForm.newPw == "" || this.userForm.newPw == undefined) {
        return;
      } else if (md5(this.userForm.newPw) != oldAuct) {
        this.userForm.newPw = "";
        this.$notify.error({
          title: "错误",
          message: "解锁密码错误，请输入登陆密码解锁",
          duration: 1500,
        });
        return;
      } else {
        setTimeout(() => {
          this.userForm.newPw = "";
          this.$store.dispatch("lockScreen/clearLock", false);
        }, 500);
      }
    },
    preventRefresh() {
      let lockCOver = localStorage.getItem("HLT_LockCOver");
      this.$store.dispatch("lockScreen/preventRefresh", lockCOver);
    },
  },
  mounted() {
    this.preventRefresh();
  },
};
</script>

<style lang="scss" scoped>
.screenBox {
  width: 100%;
  height: 100%;
  background: url("../../assets/lockscreent_imgs/img_1.jpg") no-repeat;
  background-color: #000000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  .userInfo {
    display: flex;
    .btn_class {
      margin: 5px 0 0 10px;
    }
  }
}
</style>

**控制锁屏页面的vuex **

const state = {
    isLock: localStorage.getItem("HLT_isLock") || false, //是否锁屏
    isCover: localStorage.getItem("HLT_lockCOver") || false, //是否覆盖
}
const mutations = {
    SET_LOCK: (state, cover) => {
      state.isLock = true,
            state.isCover = cover
        localStorage.setItem("HLT_LockCOver", state.isCover);
    },
    CLEAR_LOCK: (state, cover) => {
        state.isCover = cover;
        state.isLock = false;
        state.lockPassWord = "";
        localStorage.removeItem("HLT_LockCOver");
    },
    PREVENT_REFRSH: (state, cover) => {
        state.isCover = cover
    }
}
const actions = {
    setlock: ({ commit }, cover) => {
        commit("SET_LOCK", cover)
    },
    clearLock: ({ commit }, args) => {
        commit("CLEAR_LOCK", args)
    },
    preventRefresh: ({ commit }, cover) => {
        commit("PREVENT_REFRSH", cover)
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

isCover: state => state.lockScreen.isCover,

控制30分钟内锁屏

export default {
    data() {
        return {
            lastTime: null, //第一次点击
            currentTime: null, //当前点击时间
            quitTIme: 0,
            timeOut: 30 * 60 * 1000,//设置超时时间：30分钟
            clearTimer: 0,
        };
    },
    methods: {
        doSomeThing() {
            this.currentTime = new Date().getTime(); // 记录当前点击的时间
            if (this.currentTime - this.lastTime > this.timeOut) {
                window.clearInterval(this.quitTIme);
                this.$store.dispatch("lockScreen/setlock", true);
                this.clearTimer = setInterval(() => { //获取第一次实践，避免刚点击就又锁屏了
                    this.lastTime = new Date().getTime();
                    clearInterval(this.clearTimer);
                }, 200)
            } else {
                this.lastTime = new Date().getTime(); //如果30分之内点击，则把最新时间记录覆盖掉之前存的最后一次点击时间
            }
        },
    },
    created() {
        this.lastTime = new Date().getTime(); // 网页第一次打开时，记录当前时间
    },
    mounted() {
        this.quitTIme = window.setInterval(this.testTime, 1000);
    },
}

具体使用方法

• 先获取登陆的密码，使用md5进行加密

 import md5 from "js-md5"
 localStorage.setItem("XXXX",md5(userInfo.password))

• 在 App.vue中导入锁屏页面

import md5 from "js-md5"
<template>
  <div id="app">
     <lockScreen></lockScreen>  
    <router-view />
  </div>
</template>

<script>
import lockScreen from "@/components/lockScreen/index";
export default {
  name: "App",
  components: {
    lockScreen,
  },
};
</script>

• 点击锁屏

   <el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
        <i class="el-icon-lock" style="padding-right: 20px;font-size:20px;cursor: pointer;" 		   @click="lockScreen"></i>
      </el-tooltip>

  lockScreen(){
      this.$store.dispatch("lockScreen/setlock", true)
    },

• 30分钟内锁屏

使用mixins导入
在需要锁屏的地方写入事件



import lockMixin from '@/components/lockScreen/lockMixin'
export default {
  mixins:[lockMixin],
}
  <div class="dashboard-container" @click="doSomeThing"> </div>