溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue頁面鎖屏如何解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue頁面鎖屏如何解決”吧！
最新寫項目 客戶要求寫一個鎖屏功能。靜下心來，慢慢看 ，相信你會有收獲的。
功能點
1.禁止瀏覽器返回按鈕。
2.手動輸入路由會強制跳到鎖屏頁面。
3.必須輸入正確密碼或者重新登錄該系統。
思路：鎖屏的思路從 登錄開始在登錄的時候 拿到密碼 使用md5對密碼加密， 然后存到vuex或者瀏覽器本地存儲，然后新建鎖屏頁面，如下圖。 在鎖屏頁面 輸入密碼 對鎖屏頁面輸入的密碼進行MD5加密，加密后把登錄的時候存到本地存儲的密碼對比 。兩個密碼一樣的話就成功了可以跳到首頁，反之則密碼錯誤，仍然在鎖屏頁面。
上面圖片為對登錄的密碼進行md5加密
附：md5加密方法
安裝插件 js-md5
npm install js-md5 -S使用
一、全局掛載
第一步在main.js中引入md5，并掛載到vue的原型上
import md5 from 'js-md5' Vue.prototype.$md5 = md5第二步使用
this.$md5('這里是需要進行md5加密的內容')二 、局部，某個頁面使用
直接在js中引入md5，直接使用即可
import md5 from 'js-md5' console.log(md5('這里是需要進行md5加密的內容'))
<div class="right-menu-item" @click="lockScreen">
<i class="el-icon-lock" ></i>
</div>
// 鎖屏：
lockScreen() {
this.$router.push('/screen')
},上面的代碼就是點擊鎖屏按鈕 跳轉路由 到鎖屏頁面。
在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)
}
})下面代碼為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 >
<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="請輸入登陸密碼"
type="password"
auto-complete="off"
@keyup.enter.native="unLock()"
show-password
>
<div slot="prefix" >
<i class="el-icon-lock"></i></div
></el-input>
</el-form-item>
<el-form-item>
<div >
<a @click="logout">退屏重新登錄</a>
</div>
</el-form-item>
<el-form-item>
<el-button
:loading="loading"
size="medium"
type="primary"
@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: "錯誤",
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 新增 鎖屏路由
下面的代碼意思是對開始登錄的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')
}
下面代碼在screen/index.js里面 退出鎖屏重新登錄
let password = localStorage.getItem(“lockPassword”);
localStorage.setItem(“newlockPassword”, password);
注意：退出鎖屏的時候需要 把本地的首次登錄的密碼 賦值給鎖屏界面的密碼 否則退出不了 鎖屏頁面。
<el-form-item>
<div >
<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頁面鎖屏如何解決”的內容了，經過本文的學習后，相信大家對vue頁面鎖屏如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
