vue頁(yè)面鎖屏的完美解決方法記錄

更新時(shí)間：2022年06月06日 15:58:01 作者：呵呵的牛

鎖屏是指用戶暫時(shí)離開(kāi)時(shí)點(diǎn)擊鎖屏,用戶無(wú)法跳轉(zhuǎn)到其他頁(yè)面,回來(lái)輸入密碼點(diǎn)擊解鎖,下面這篇文章主要給大家介紹了關(guān)于vue頁(yè)面鎖屏的完美解決方法,需要的朋友可以參考下

vue實(shí)現(xiàn)頁(yè)面鎖屏完美解決

最新寫(xiě)項(xiàng)目客戶要求寫(xiě)一個(gè)鎖屏功能。靜下心來(lái)，慢慢看，相信你會(huì)有收獲的。

功能點(diǎn)

1.禁止瀏覽器返回按鈕。

2.手動(dòng)輸入路由會(huì)強(qiáng)制跳到鎖屏頁(yè)面。

3.必須輸入正確密碼或者重新登錄該系統(tǒng)。

思路：鎖屏的思路從登錄開(kāi)始在登錄的時(shí)候拿到密碼使用md5對(duì)密碼加密，然后存到vuex或者瀏覽器本地存儲(chǔ)，然后新建鎖屏頁(yè)面，如下圖。在鎖屏頁(yè)面輸入密碼對(duì)鎖屏頁(yè)面輸入的密碼進(jìn)行MD5加密，加密后把登錄的時(shí)候存到本地存儲(chǔ)的密碼對(duì)比。兩個(gè)密碼一樣的話就成功了可以跳到首頁(yè)，反之則密碼錯(cuò)誤，仍然在鎖屏頁(yè)面。

上面圖片為對(duì)登錄的密碼進(jìn)行md5加密

附：md5加密方法

安裝插件 js-md5
npm install js-md5 -S
使用

一、全局掛載

第一步在main.js中引入md5，并掛載到vue的原型上
import md5 from 'js-md5'
Vue.prototype.$md5 = md5
第二步使用
this.$md5('這里是需要進(jìn)行md5加密的內(nèi)容')
二、局部，某個(gè)頁(yè)面使用

直接在js中引入md5，直接使用即可
import md5 from 'js-md5'
console.log(md5('這里是需要進(jìn)行md5加密的內(nèi)容'))

 <div class="right-menu-item" style="cursor: pointer"  @click="lockScreen">
          <i class="el-icon-lock" style="font-weight:700;"></i>
        </div>
	  // 鎖屏：
    lockScreen() {
      this.$router.push('/screen')
    },

上面的代碼就是點(diǎn)擊鎖屏按鈕跳轉(zhuǎn)路由到鎖屏頁(yè)面。

1.禁止瀏覽器返回按鈕

在main.js里面加上下面的代碼

	//禁止瀏覽器上一步下一步
window.addEventListener('popstate', function() {
  history.pushState(null, null, document.URL)
 })

在 router/index.js里面加上 scrollBehavior: () => {
history.pushState(null, null, document.URL)
}這個(gè)代碼

export default new Router({
  mode: 'history', // 去掉url中的#
  // scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  scrollBehavior: () => {
    history.pushState(null, null, document.URL)
  }
})

2.書(shū)寫(xiě)鎖屏頁(yè)面和相關(guān)路由

下面代碼為screen/index.js 為鎖屏的頁(yè)面首先進(jìn)入這個(gè)頁(yè)面默認(rèn)執(zhí)行一次 unlock方法里面的localStorage.setItem(“newlockPassword”, md5(this.userForm.newPw));

把解鎖的密碼存到本都對(duì)象存儲(chǔ)里面，這樣路由就好做處理。

	<template>
  <div class="app">
    <el-form class="userInfo">
      <div class="body-icon">
      </div>
      <div class="title-icon">
      </div>
      <div class="box">
        <img src="../../assets/logo/logo.png" class="lock-avatar" />
      </div>
      <el-form-item>
        <el-row style="margin-left: 100px">
          <el-col :span="2">
          </el-col>
          <el-col :span="12" class="lock-nickName">{{ nickName }}</el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="userForm.newPw"
          placeholder="請(qǐng)輸入登陸密碼"
          type="password"
          auto-complete="off"
          @keyup.enter.native="unLock()"
          show-password
        >
          <div slot="prefix" style="margin-left: 3px">
            <i class="el-icon-lock"></i></div
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center; color: #1890ff">
          <a @click="logout">退屏重新登錄</a>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click="unLock"
          ><i class="el-icon-unlock"></i>解鎖</el-button
        >
        <!-- <el-button
          circle
          type="primary"
          plain
          icon="el-icon-unlock"
          @click="unLock"
        ></el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      userForm: {
        newPw: "",
        user: "",
      },
      loading: false,
    };
  },
  methods: {
    unLock() {
      let oldAuct = localStorage.getItem("lockPassword");
      localStorage.setItem("newlockPassword", md5(this.userForm.newPw));
      console.log(oldAuct, localStorage.getItem("newlockPassword"), "999990");
      if (this.userForm.newPw === "" || this.userForm.newPw === undefined) {
        return;
      } else if (md5(this.userForm.newPw) != oldAuct) {
        this.userForm.newPw = "";
        this.$notify.error({
          title: "錯(cuò)誤",
          message: "解鎖密碼錯(cuò)誤，請(qǐng)輸入登陸密碼解鎖",
          duration: 1500,
        });
        return;
      } else {
        setTimeout(() => {
          this.$notify.success({
            title: "解鎖成功",
            duration: 1500,
          });
          this.$router.push("/index");
          this.userForm.newPw = "";
        }, 500);
      }
    },
    async logout() {
      this.$confirm("確定注銷并退出系統(tǒng)嗎？", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let password = localStorage.getItem("lockPassword");
        localStorage.setItem("newlockPassword", password);
        this.$store.dispatch("LogOut").then(() => {
          location.href = "/login";
        });
      });
    },
  },
  mounted() {
    this.unLock();
  },
};
</script>

<style lang="scss" scoped>
.app {
  // background-image: url("../../assets/images/back.png");
  background-size: 100%; // 背景圖片大小最大
  height: 100%; //寬、高也最大
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: skyblue; //一定要設(shè)置背景顏色
  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;
    background: #ffffff;
    // height: 300px;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .title-icon {
      width: 120px;
      height: 20px;
      margin-bottom: 22px;
    }
    .body-icon {
      width: 500px;
      height: 120px;
      position: absolute;
      margin-left: -152px;
      margin-top: -166px;
    }
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      .lock-avatar {
        width: 100px;
        height: 100px;
        border-radius: 100px;
      
      }
    }

    .lock-nickName {
      margin-top: -2px;
      font-size: 14px;
      font-weight: 560;
      text-align: center;
    }
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
  }
}
</style>

下面圖片為router/index.js 新增鎖屏路由

3.在router.beforeEach()路由首首位加上以下代碼

下面的代碼意思是對(duì)開(kāi)始登錄的MD5加密密碼和 鎖屏頁(yè)面的MD5密碼 不相等并且將要去的路由不是screen 則直接跳到 screen這個(gè)頁(yè)面。

這樣的話只要點(diǎn)擊鎖屏按鈕進(jìn)入 screen鎖屏頁(yè)面返回禁止了，路由里面輸入路由也不會(huì)生效。

	 /**
	 * 判斷鎖屏
	 */
	 //登錄的時(shí)候存的md5加密的密碼
  let oldPasswordld = localStorage.getItem("lockPassword");
  //鎖屏頁(yè)面的md5加密密碼
  let newlockPassword = localStorage.getItem("newlockPassword");
  console.log(oldPasswordld,newlockPassword)
	if (newlockPassword !== oldPasswordld && to.path !== '/screen') {
    next('/screen')
	}

4.實(shí)現(xiàn)退出鎖屏重新登錄

下面代碼在screen/index.js里面退出鎖屏重新登錄

let password = localStorage.getItem(“lockPassword”);
localStorage.setItem(“newlockPassword”, password);

注意：退出鎖屏的時(shí)候需要把本地的首次登錄的密碼賦值給鎖屏界面的密碼否則退出不了鎖屏頁(yè)面。

 <el-form-item>
        <div style="text-align: center; color: #1890ff">
          <a @click="logout">退屏重新登錄</a>
        </div>
      </el-form-item>
	 async logout() {
      this.$confirm("確定注銷并退出系統(tǒng)嗎？", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
      //退出鎖屏的時(shí)候需要 把本地的首次登錄的密碼 賦值給鎖屏界面的密碼 否則退出不了 鎖屏頁(yè)面。然后調(diào)用vuex退出方法
        let password = localStorage.getItem("lockPassword");
        localStorage.setItem("newlockPassword", password);
        this.$store.dispatch("LogOut").then(() => {
          location.href = "/login";
        });
      });
    },