前端（vue)锁屏功能实现，解决刷新会退出锁屏、重新进入显示锁屏页面等问题（新增解决loacalStorage在同一域名下共享问题）

小玲子小玲子

已于 2023-12-22 10:52:42 修改

阅读量3k

点赞数 6

分类专栏： vue功能文章标签：前端 vue.js javascript

于 2023-02-06 14:46:33 首次发布

本文链接：https://blog.csdn.net/lingliu0824/article/details/128873855

版权

vue功能专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景

设计一个锁屏页面供用户离开（手动点击）或者长时间未操作时使用

场景

用户一段时间没有操作或者手动点击锁屏按钮时，显示锁屏页面
在锁屏页面强制刷新时，需保持在显示锁屏页面或者跳转到登录页面（通过判断token是否有效决定是否跳转到登录）
如果当前窗口已经锁屏，重开一个该地址的新窗口；或者关闭当前窗口时是锁屏状态，重新打开窗口时，新窗口直接跳到登录页面。

实现

锁屏页面的实现
锁屏页面通过fixed布局的方式覆盖整个窗口（也可以通过路由的方式，但是路由的方式不方便解锁后的路由返回）,(setIsLock方法在下文）
LockPage组件

<template>
  <div class="lock-container">
    自定义锁屏内容
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Lock',
  data () {
    return {

    }
  },
  computed: {
  },
  methods: {
    ...mapActions({
      // 设置是否锁屏
      setIsLock: 'systemLock/setIsLock'
    }),
    handleLogin () {
      // 省略解锁逻辑
      this.setIsLock(false)
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.lock-container {
  z-index: 1001;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

</style>

2.APP.vue中使用锁屏组件
在这里插入图片描述
app.vue中只包含简单的锁屏组件和路由视图，通过isLock和是否登录（islogon）判断锁屏是否显示。
3.isLock的设置
使用的vuex的状态管理来存储isLock
点击锁屏按钮、设定时间内未操作（鼠标未移动）则设置isLock=true，当isLock为false,且设定时间内为设置isLock则认为是未操作设置其为true

vuex设置isLock的方法

setIsLock ({ commit, state }, isLock) {
    commit('SET_ISLOCK', isLock)
    if (!isLock) {
      clearTimeout(timeOut)
      //设置时间内未操作，则设置锁屏状态为true
      timeOut = setTimeout(() => {
        commit('SET_ISLOCK', true)
      }, 1000 * 30 * 60)
    }
  }

APP.vue中监听鼠标移动，移动则让isLock为false(vuex重新计时)

 // 在登录后且未锁屏状态监听用户是否操作（鼠标移动）
 wacth:{
	isLock: {
      handler: function (newVal, oldVal) {
        if (this.isLock) {
          window.removeEventListener('mousemove', this.mousemove)
        } else if (this.islogon) {
          // 未锁屏且已经登录的情况监听用户操作
          window.addEventListener('mousemove', this.mousemove)
        }
      },
      immediate: false
    },
 },
 methods: {
    ...mapActions({
      setIsLock: 'systemLock/setIsLock',
    }),
    mousemove () {
      _.throttle(() => {
        this.setIsLock(false)
      }, 1000 * 60, {
        leading: true,
        trailing: false
      })
    }
  },

问题1:锁屏时刷新页面，vuex的内容被初始化，从而退出锁屏页面，不满足需求
解决：同时使用localStorage来存储isLock

用localSotrage来初始化vuex
isLock变化时同时设置localStorage
跳转isLock的watch方法调整：

watch:{
	isLock: {
      handler: function (newVal, oldVal) {
        if (this.isLock) {
          window.removeEventListener('mousemove', this.mousemove)
          localStorage.setItem('isLock', 'isLock')
        } else {
          localStorage.removeItem('isLock')
          if (this.islogon) {
            window.addEventListener('mousemove', this.mousemove)
          }
        }
      },
      immediate: false
    },
}

注！！！：如果只需要实现刷新时保持锁屏状态，重新打开窗口时之前的锁屏状态不影响当前窗口的状态，即关闭当前窗口时是锁屏状态，重新在新窗口打开系统时，走正常的流程（未锁屏的流程）。那么只需要将上面的localStorage换成sessionStorage即可，下面的内容无需再看。

问题2：如果使用localStorage来初始化vuex，若在锁屏时关闭窗口，后面再打开网站时会直接进入锁屏页面，不合理，应该直接到登录页面
解决：
使用sessionStorage来判断当前的操作是第一次进入系统还是刷新系统（sessionStorage只在当前窗口有效）。第一次进入系统时如果localStorage的isLock=‘isLock’则不要用localStorage初始化vuex,直接跳转到登录页面；若为刷新操作，则用localSotrage来初始化vuex。

vuex中isLock初始化值设置为false
在sessionStorage设置initialized字段代表是否已经初始化。在APP.vue的created中手动初始化vuex的isLock

 created () {
    if (localStorage.getItem('isLock') === 'isLock') {
      // 刷新时（非首次进入），如果是锁屏状态，则继续显示锁屏页面
      if (sessionStorage.getItem('initialized') === 'initialized') {
        this.setIsLock(true)
      } else {
      	this.$router.push('/login')
        localStorage.removeItem('isLock')
      }
    }
}

问题3：使用localStroage保存锁屏状态时，由于在同一个域名下loacalStroge是共享的，如果同时在两个窗口打开了当前系统，其中一个系统锁屏后localstorage中的锁屏状态变为“true",此时另一个系统如果刷新，发现锁屏状态为true，则会进入锁屏页面，不合理。或者一个页面解锁后，localStroge锁屏状态变成”false" ,另一个锁屏状态的窗口刷新后发现已经解锁，也不合理。
解决：（待验证）
既要保证锁屏状态只在当前窗口有效，又要保证当前窗口关闭后，当前的锁屏状态仍要保留（如果关闭窗口时是锁屏状态，下次打开系统时应该跳到登录页面）

进入系统时在sessionStorage中设置一个isLockKey,为其赋值为一个随机值，可以使用uuid等（刷新时不要在重新赋值，判断isLockKey是否有值即可）

created () {
    const isLockKey = sessionStorage.getItem('isLockKey')
    if (!isLockKey) {
      sessionStorage.setItem('isLockKey', this.$customUtil.commonUtil.createGuid())
    }
   }

然后localStorage中的isLock就不能是字符串了，可以为一个数组形式，里面存放了那些窗口是锁屏状态。如果其中一个窗口锁屏了，就将其窗口的sessionStorage的isLockKey的值插入到localStorage中。

 isLock: {
      handler: function (newVal, oldVal) {
        const isLockKey = sessionStorage.getItem('isLockKey')
        let lockList = localStorage.getItem('isLock')
        if (lockList) {
          try {
            lockList = JSON.parse(lockList)
          } catch (err) {
            lockList = []
          }
        } else {
          lockList = []
        }
        if (this.isLock) {
          window.removeEventListener('mousemove', this.mousemove)
          lockList.push(isLockKey)
        } else {
          const index = lockList.indexOf(isLockKey)
          if (index !== -1) {
            lockList.splice(index, 1)
          }
          if (this.islogon) {
            window.addEventListener('mousemove', this.mousemove)
          }
        }
        lockList = Array.from(new Set(lockList))
        localStorage.setItem('isLock', JSON.stringify(lockList))
      }
    },

进入系统和刷新时结合localStorage和sessionStorage判断当前锁屏状态，另外在关闭窗口时删除localStorage中的isLock中的当前窗口isLockKey值，重写App.vue的created的方法

created () {
    let isLockKey = sessionStorage.getItem('isLockKey')
    if (!isLockKey) {
      isLockKey = this.$customUtil.commonUtil.createGuid()
      sessionStorage.setItem('isLockKey', isLockKey)
    }
    let lockList = localStorage.getItem('isLock')
    if (lockList) {
      try {
        lockList = JSON.parse(lockList)
      } catch (err) {
        lockList = []
      }
    } else {
      lockList = []
    }
    if (lockList.length) {
      // 刷新时（非首次进入），如果是锁屏状态，则继续显示锁屏页面
      if (sessionStorage.getItem('initialized') === 'initialized') {
        if (lockList.includes(isLockKey)) {
          this.setIsLock(true)
        }
      } else {
        this.$router.push('/login')
      }
    }
    window.addEventListener('beforeunload',this.deleteCurrentLockStatus )
  },
    methods: {
    deleteCurrentLockStatus () {
      const isLockKey = sessionStorage.getItem('isLockKey')
      let lockList = localStorage.getItem('isLock')
      if (lockList) {
        try {
          lockList = JSON.parse(lockList)
        } catch (err) {
          lockList = []
        }
      } else {
        lockList = []
      }
      const index = lockList.indexOf(isLockKey)
      if (index !== -1) {
        lockList.splice(index, 1)
      }
      lockList = Array.from(new Set(lockList))
      localStorage.setItem('isLock', JSON.stringify(lockList))
    },
  }

附：
vuex完整代码：

let timeOut = null
const _state = {
  lockTime: 1000 * 30 * 60,
  isShowLock: false,
  isLock: false
}
const getters = {
  lockTime: state => state.lockTime,
  isShowLock: state => state.isShowLock,
  isLock: state => state.isLock
}
const mutations = {
  SET_ISLOCK: (state, isLock) => {
    state.isLock = isLock
  },
  SET_LOCKTIME: (state, lockTime) => {
    state.lockTime = lockTime
  },
  SET_ISSHOWLOCK: (state, isShowLock) => {
    state.isShowLock = isShowLock
  }
}

const actions = {
  setLockTime ({ commit }, lockTime) {
    commit('SET_LOCKTIME', lockTime * 1000 * 60)
  },
  setIsShowLock ({ commit }, isShowLock) {
    commit('SET_ISSHOWLOCK', isShowLock)
  },
  setIsLock ({ commit, state }, isLock) {
    commit('SET_ISLOCK', isLock)
    if (!isLock) {
      clearTimeout(timeOut)
      timeOut = setTimeout(() => {
        commit('SET_ISLOCK', true)
      }, state.lockTime)
    }
  }
}

export default {
  namespaced: true,
  getters,
  state: _state,
  mutations,
  actions
}