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的安装
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">
<!-- <img
width="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-input
v-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-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: "",
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";
});
});
},
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
