vue实现页面锁屏完美解决（续集）

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.添加锁屏按钮

下面的是锁屏按钮和代码

	  

          
        

   // 锁屏：
    lockScreen() {
      this.$router.push('/screen')
    },

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

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

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));

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

	
        

          退屏重新登录
        
      
 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";
        });
      });
    },