vue實現頁面鎖屏完美解決

最新寫項目 客戶要求寫一個鎖屏功能。靜下心來，慢慢看 ，相信你會有收獲的。

功能點
1.禁止瀏覽器返回按鈕。
2.手動輸入路由會強制跳到鎖屏頁面。
3.必須輸入正確密碼或者重新登錄該系統。
思路：鎖屏的思路從 登錄開始在登錄的時候 拿到密碼 使用md5對密碼加密， 然后存到vuex或者瀏覽器本地存儲，然后新建鎖屏頁面，如下圖。 在鎖屏頁面 輸入密碼 對鎖屏頁面輸入的密碼進行MD5加密，加密后把登錄的時候存到本地存儲的密碼對比 。兩個密碼一樣的話就成功了可以跳到首頁，反之則密碼錯誤，仍然在鎖屏頁面。

上面圖片為對登錄的密碼進行md5加密 md5加密方法 vue加密方法博客

<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')},

上面的代碼就是點擊鎖屏按鈕 跳轉路由 到鎖屏頁面。

1.禁止瀏覽器返回按鈕

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

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

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

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

2.書寫鎖屏頁面和相關路由

下面代碼為screen/index.js 為鎖屏的頁面 首先進入這個頁面 默認執行一次 unlock方法里面的localStorage.setItem(“newlockPassword”, md5(this.userForm.newPw));
把解鎖的密碼存到本都對象存儲里面，這樣路由就好做處理。

<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-inputv-model="userForm.newPw"placeholder="請輸入登陸密碼"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-buttoncircletype="primary"plainicon="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: "錯誤",message: "解鎖密碼錯誤，請輸入登陸密碼解鎖",duration: 1500,});return;} else {setTimeout(() => {this.$notify.success({title: "解鎖成功",duration: 1500,});this.$router.push("/index");this.userForm.newPw = "";}, 500);}},async logout() {this.$confirm("確定注銷并退出系統嗎？", "提示", {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; //一定要設置背景顏色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()路由首首位加上以下代碼

下面的代碼意思是對開始登錄的MD5加密密碼和 鎖屏頁面的MD5密碼 不相等 并且 將要去的路由不是screen 則直接跳到 screen這個頁面。

這樣的話 只要點擊鎖屏按鈕進入 screen鎖屏頁面 返回禁止了，路由里面輸入路由也不會生效。

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

5.實現退出鎖屏重新登錄

下面代碼在screen/index.js里面 退出鎖屏重新登錄
let password = localStorage.getItem(“lockPassword”);
localStorage.setItem(“newlockPassword”, password);

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

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

總結

以上是生活随笔為你收集整理的vue实现页面锁屏完美解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。