乐趣区

关于前端:关于一段时间不操作自动退出系统

公司为了配合等保,须要做一些安全性解决

例如:如果登录用户在进入零碎后,始终没有操作的状况下,一段时间后强制登出零碎

刚开始共事写了一个,思路是:

在拜访零碎登录页面的时候执行一个 setInterval,每隔 3 秒钟去查看一遍是否超出咱们设定的工夫没有操作系统了,而且断定这个是拿mouseover 来监听的鼠标是否来到最外层div

实现代码

//App.vue 页面

  // html
  <div id="app" @mouseover="cmouseovered">
    <router-view />
  </div>
  
  // js
  mounted() {this.tiemer = window.setInterval(this.checkTimeout, 3000)
  },
  
  methods: {cmouseovered() {localStorage.setItem('lastTime', new Date().getTime())
    },
    checkTimeout() {this.currentTime = new Date().getTime() // 更新以后工夫
      this.lastTime = localStorage.getItem('lastTime')
      if (this.currentTime - this.lastTime > this.timeOut) {
        // 判断是否超时
        if (this.$route.path !== '/login') {// console.log('超时了')
          this.$store.dispatch('user/logout')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }
      }
    }
  }

这个思路,能够很显著看到几个问题:

  • 1. 这个代码是写在 VUE 我的项目最外层 app 页面,也就是还没登录的时候定时器曾经在执行了;登录页必定是不须要再退出零碎了
  • 2. 定时器没有开释,setInterval 是比拟耗费性能的
  • 3. 比对的是本地工夫,本地机器工夫是能够随时批改的

联合这几个问题,咱们来做一下优化

  • 针对第一个问题,全局页面不止 app 一个,最好是放在登录当前的全局页面去监听事件,咱们我的项目有 layout,所以把监听移植到 layout 比拟适合;
  • 针对第二个问题,应用 setTimeout 代替 setInterval,性能更好
  • 针对第三个问题优化点:不去比照工夫,咱们只有做到再过多长时间执行退出零碎操作即可

最初实现代码

<div class="app-wrapper" @mouseover="cmouseovered"></div>

// js
mounted() {this.countTime()
  },
  methods: {countTime() {
      const vm = this
      this.timer = setTimeout(function() {vm.logout()
      }, this.timeOut)
    },
    cmouseovered() {clearTimeout(this.timer)
      this.countTime()},
    async logout() {await this.$store.dispatch('user/logout')
      this.$router.push('/login')
      clearInterval(this.tiemer)
    }
  }

这个实现就解决了下面 3 大问题,大家看到了,我用的是 mouseover 来监听用户还有没有操作系统,因为这个事件会冒泡到所有的下级元素,只有鼠标还有挪动在咱们的界面上,就每次都会重置定时器

❤️ 看完两件小事

如果你感觉这篇文章对你挺有启发,我想请你帮我两个小忙:

把这篇文章分享给你的敌人 / 交换群,让更多的人看到,一起提高,一起成长!

关注公众号「画漫画的程序员 」,公众号后盾回复「 资源」收费支付我精心整顿的前端进阶资源教程

JS 中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮忙开发者用代码扭转世界为使命的平台,每天都能够在这里找到技术世界的头条内容

退出移动版