您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue頁面鎖屏如何解決”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue頁面鎖屏如何解決”吧!
最新寫項(xiàng)目 客戶要求寫一個(gè)鎖屏功能。靜下心來,慢慢看 ,相信你會(huì)有收獲的。
功能點(diǎn)
1.禁止瀏覽器返回按鈕。
2.手動(dòng)輸入路由會(huì)強(qiáng)制跳到鎖屏頁面。
3.必須輸入正確密碼或者重新登錄該系統(tǒng)。
思路:鎖屏的思路從 登錄開始在登錄的時(shí)候 拿到密碼 使用md5對密碼加密, 然后存到vuex或者瀏覽器本地存儲(chǔ),然后新建鎖屏頁面,如下圖。 在鎖屏頁面 輸入密碼 對鎖屏頁面輸入的密碼進(jìn)行MD5加密,加密后把登錄的時(shí)候存到本地存儲(chǔ)的密碼對比 。兩個(gè)密碼一樣的話就成功了可以跳到首頁,反之則密碼錯(cuò)誤,仍然在鎖屏頁面。
上面圖片為對登錄的密碼進(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è)頁面使用
直接在js中引入md5,直接使用即可
import md5 from 'js-md5' console.log(md5('這里是需要進(jìn)行md5加密的內(nèi)容'))
<div class="right-menu-item" @click="lockScreen"> <i class="el-icon-lock" ></i> </div> // 鎖屏: lockScreen() { this.$router.push('/screen') },
上面的代碼就是點(diǎn)擊鎖屏按鈕 跳轉(zhuǎn)路由 到鎖屏頁面。
在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) } })
下面代碼為screen/index.js 為鎖屏的頁面 首先進(jìn)入這個(gè)頁面 默認(rèn)執(zhí)行一次 unlock方法里面的localStorage.setItem(“newlockPassword”, md5(this.userForm.newPw));
把解鎖的密碼存到本都對象存儲(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 > <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: "錯(cuò)誤", message: "解鎖密碼錯(cuò)誤,請輸入登陸密碼解鎖", 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 新增 鎖屏路由
下面的代碼意思是對開始登錄的MD5加密密碼和 鎖屏頁面的MD5密碼 不相等 并且 將要去的路由不是screen 則直接跳到 screen這個(gè)頁面。
這樣的話 只要點(diǎn)擊鎖屏按鈕進(jìn)入 screen鎖屏頁面 返回禁止了,路由里面輸入路由也不會(huì)生效。
/** * 判斷鎖屏 */ //登錄的時(shí)候存的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(“l(fā)ockPassword”);
localStorage.setItem(“newlockPassword”, password);
注意:退出鎖屏的時(shí)候需要 把本地的首次登錄的密碼 賦值給鎖屏界面的密碼 否則退出不了 鎖屏頁面。
<el-form-item> <div > <a @click="logout">退屏重新登錄</a> </div> </el-form-item> async logout() { this.$confirm("確定注銷并退出系統(tǒng)嗎?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }).then(() => { //退出鎖屏的時(shí)候需要 把本地的首次登錄的密碼 賦值給鎖屏界面的密碼 否則退出不了 鎖屏頁面。然后調(diào)用vuex退出方法 let password = localStorage.getItem("lockPassword"); localStorage.setItem("newlockPassword", password); this.$store.dispatch("LogOut").then(() => { location.href = "/login"; }); }); },
感謝各位的閱讀,以上就是“vue頁面鎖屏如何解決”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue頁面鎖屏如何解決這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。