vue实现页面锁屏完美解决 (续集)

vue实现页面锁屏完美解决这篇文章的续集。

上面那篇文章还不够完美在后面还是出现了一些bug。所以为了大家能少走点弯路我把我遇到的坑以及解决的办法和最新的写法会一一罗列出来。
如果你不看第一篇文章直接看这篇按照流程也能写出完整的锁屏功能

遇到的坑

vue中存储密码和token 用什么去存储呢？相信如果您作为一名前端，那么你肯定会在想 vuex ，cookie ,
sessionStorage,localStorage，用哪一个呢？答案：sessionStorage。

cookie和localStorage去存储出现的bug。就是在我们在goole浏览器打开页面A登录，在页面A点击锁屏。再打开新标签goole浏览器，打开B页面输入登录链接回车，会发现B页面直接跳到了页面A的首页，这样A页面的锁屏就形同虚设。导致原因：因为同一款浏览器中的同一域名（http:localhost）的cookie和localStorage在这一款浏览器中存储的token和localStorage是共享的，当你新建一个页面会直接获取cookie和localStorage的token 直接进去A页面的首页。

页面A
页面B

vuex 的问题就是 vuex在首次登录密码存上了但是当你刷新页面的时候你在登录页存储的密码就会被清空
所以vuex去存储token和密码是不行的。
写到这里很多同学肯定会问那为什么用 sessionStorage去存储呢？
sessionStorage存储的数据，不会跨页面每一个页面同一个域名下面的token和密码存储不会共享，并且在页面关闭的时候存储的token和密码会自动清掉这样就不会造成页面之间的存储数据的污染。这样就很好的实现了锁屏的时候不会出现各种奇怪的bug.

最后写出接近完美的实现方法。

1.md5的安装

md5加密的安装博客

2.登录页面存储密码

在登录页面把登录的密码使用MD5进行加密，把加密后的密码存到sessionStorage，存两个一个lockPassword 和一个newloackPassword, 第一个是原始密码，第二个是锁屏页面需要输入的密码，两个密码设置成一样是为了避免，第一次登录的时候直接进入锁屏页面。

3.添加锁屏按钮

下面的是锁屏按钮和代码

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

4.画出锁屏页面 screen/index.js

在这里首次进入页面会默认执行一次unLock方法目的是为了把登录页面的密码newlockPassword 重置掉使得 登录的密码lockPassword和锁屏页面的密码newlockPassword 两个密码不一致

 <template><div class="app" v-if="true"><el-form class="userInfo"><div class="body-icon"><!-- <img src="@/icons/svg/power-screen-xiaoyue.svg" /> --><!-- 123 --></div><div class="title-icon"><!-- <img src="@/icons/svg/power-login-title.svg" /> --><!-- 123 --></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"><!-- <imgwidth="14px"height="14px"src="@/icons/svg/power-login-account.svg"/> --></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: "",isCover: true,// isLock:this.$store.state.user.isLock,},loading: false,};},methods: {unLock() {let oldAuct = sessionStorage.getItem("lockPassword");sessionStorage.setItem("newlockPassword", md5(this.userForm.newPw));console.log(oldAuct, sessionStorage.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 = sessionStorage.getItem("lockPassword");sessionStorage.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>

5.添加screen路由

6.在router.beforeEach()路由首首位加上以下代码

下面代码的意思是如果首页登录的密码不等于锁屏页面的密码并且将要去的页面不是 screen锁屏页面。
如果将要去的页面是’/login?redirect=%2Findex’ 或者/login 就直接跳到登录页面，清除token。
否则直接跳到锁屏页面。

  /*** 判断锁屏*/let oldPasswordld = sessionStorage.getItem("lockPassword");let newlockPassword = sessionStorage.getItem("newlockPassword");if (newlockPassword !== oldPasswordld && to.path !== '/screen') {if (to.path === '/login?redirect=%2Findex' || to.path === '/login') {next('/login?redirect=%2Findex')sessionStorage.remove("token");} else {next('/screen')}}

7.实现退出锁屏重新登录

下面代码在screen/index.js里面退出锁屏重新登录
let oldAuct = sessionStorage.getItem(“lockPassword”);
sessionStorage.setItem(“newlockPassword”, md5(this.userForm.newPw));

注意：退出锁屏的时候需要把本地的首次登录的密码赋值给锁屏界面的密码否则退出不了锁屏页面。

 <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 = sessionStorage.getItem("lockPassword");sessionStorage.setItem("newlockPassword", password);this.$store.dispatch("LogOut").then(() => {location.href = "/login";});});},