VUE实现长时间未操作退出登录

背景：在现在大多系统中，为了保障用户的安全，都会有固定时间未操作则自动退出登录的功能，这里根据我目前了解的内容大致实现一个简单的。

我的想法是这样，通过对定时器setTimeOut的使用，来进行倒计时30分钟，到30分钟后触发登出的操作，如果在这期间进行点击鼠标的动作，则重置此定时器。

因为在所有的界面都需要进行这个操作，所以我直接放在App.vue中进行编写

<template>
<transition name="fade" mode="out-in"><router-view></router-view>
</transition>
</template><script>
export default {name: 'app',//定义一个计时器data() {return {myTimer: null}},//设置监听事件，从登录界面跳转到首页的时候就进行触发watch: {'$route.path': function (){this.myTimeOut()}},//在钩子函数中设置一个全局监听，如果有点击鼠标的动作，则调用myTimeOut方法mounted() {this.$nextTick(() => {window.addEventListener('mousedown',this.myTimeOut)})},methods: {myTimeOut(){//因为登录界面不需要进行校验，所以将它排除在外let path = ['/aes/login','/']if (!path.includes(this.$route.path)) {console.log('--------计时器--------')//首先需要清楚原有的计时器，如果不清除的话无法做到重置clearTimeout(this.myTimer)//这里设置一个新的计时器，并赋给myTimerthis.myTimer = setTimeout(() => {// 在这执行登出的操作，具体情况参考您的系统中this.$store.dispatch('removeToken')this.$store.dispatch('removeRoutes')this.$router.push('/aes/login')//设置弹窗，提示过期window.alert('您的登录已经过期！')// 三十分钟}, 1000 * 60 * 30)}}}
}
</script><style lang="less">
</style>

最后虽然实现了，不过我感觉这种方法并不好，如各位大佬有更好的方法，欢迎指导！！！

VUE实现长时间未操作退出登录相关推荐

原生js制作页面长时间未操作退出登录
昨天一个同事问我,进入到一个页面后,这个时候不进行任何操作,然后15分钟后就自动退出登录,这个功能怎么实现? 电脑进入待机状态原理说到这个问题,我觉得这个问题和电脑长时间未操作进入待机状态是一个 ...
vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将 ...
vue 上次登录时间_vue实现登录之后长时间未操作，退出登录
效果如下: vue实现用户登录系统之后,长时间未操作,提示登录超时,直接退出登录,跳转至登录页面. app.vue: import {mapActions } from 'vuex'; import ...
页面长时间未操作，实现自动退出登录原理
项目场景: 页面长时间未操作的时候,会自动退出登录,并且提示你的登录已过期,需重新登录.那这个是怎么实现的呢? 两种方案第一种是完全由后端实现的,后台在servlet可以获取到session,可以设 ...
web 页面长时间未操作自动退出方法（自动退出登录）
web 页面自动超时自动退出方法思路: 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js): var ...
如何处理电脑长时间未操作出现的假死？
如何处理电脑长时间未操作出现的假死? 我们平时经常会遇到由于长时间未操作电脑,再使用时只有鼠标光标可以移动,桌面上的图标无法响应,包括任务栏的程序,那么我们应该怎么处理比较得当呢? 尝试使用光盘插拔动 ...
Mac电脑设置长时间不用自动退出登录
如果你很懒每日工作后不想关机,尽管macOS可以设置自动休眠但是每天重新开机后,软件还是开启的,时间太久电脑容易变卡,怎么设置让电脑休眠后退出登录达到重启的效果呢? 小编教你怎么设置macOSMac电 ...
vue中长时间未操作就会强制退出
1. 创建一个公共js文件 import router from '../router' import store from '../store'var lastTime = new Date().g ...
vue 页面长时间静止不动，触发自动退出事件
import store from '@/store' import router from '@/router' import Cookies from "js-cookie"; ...

VUE实现长时间未操作退出登录

VUE实现长时间未操作退出登录相关推荐

最新文章

热门文章