Vue2/3 登录后,用户无操作半小时后自动清除登录信息退出登录下线

1、打开App.vue 页面,然后新增监听全局点击事件的方法

data() {
    return {
      lastTime: null,
      timeOut: 10 * 100 * 60,
    }
  },
metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
  },
  created() {
    this.lastTime = new Date().getTime()
  },
methods: {
    //全局监听得点击事件
    isTimeOut() {
      var currentTime = new Date().getTime();
      
      // 判断上次最后一次点击的时间和这次点击的时间间隔
       if (currentTime - this.lastTime > this.timeOut) {
        //这个是判断 当前用户是否登录,根据自己的情况写
        // if (null != sessionStorage.getItem('token')) {

        this.$alert('身份验证已过期,请重新登录', '提示', {
          confirmButtonText: '确定',
          callback: action => {
           //这里写路由(跳转到登录页)
           this.$router.replace('/login')
          }
        });
        // }
      } else {
        // 如果在期限内点击,则把这次点击的时间覆盖掉之前存的最后一次点击的时间
        this.lastTime = new Date().getTime()
      }
    }
  }

Vue 3是一种流行的JavaScript框架,用于构建用户界面。通常,一个网站或应用程序会要求用户在一段时间内保持登录状态,以便他们可以保持访问权限。在Vue 3中,可以通过设置一个定时器来实现半小时内未进行任何操作自动跳出登录界面。 首先,我们需要定义一个计时器变量,用于追踪用户操作时间。当用户登录时,我们将启动计时器并将其设置为30分钟(30 * 60 * 1000毫秒)。 ```javascript let timer = null; // 用户登录后启动计时器 function startTimer() { timer = setTimeout(() => { // 执行跳出登录界面的操作 logout(); }, 30 * 60 * 1000); } // 用户操作时重置计时器 function resetTimer() { clearTimeout(timer); startTimer(); } // 用户登出时清除计时器 function logout() { clearTimeout(timer); // 执行登出操作 } ``` 在Vue 3中,我们可以将`resetTimer`函数绑定到用户操作事件上,以便在用户进行任何操作时重置计时器。例如,我们可以将其绑定到鼠标点击事件和键盘事件上。 ```html <template> <div> <!-- 网站的内容区域 --> <button @click="resetTimer">按钮</button> <input type="text" @keydown="resetTimer"> </div> </template> <script> export default { methods: { resetTimer() { resetTimer(); } } } </script> ``` 当用户半小时内没有进行任何操作时,`setTimeout`函数将会触发,并执行跳出登录界面的操作,例如清除用户登录状态或跳转到登录页面。 这是一个基本的示例,你可以根据你的具体需求进行修改和扩展。记住,在实际应用中,建议结合后端服务器的会话管理机制来实现更安全和稳定的用户认证系统。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值