Angularjs实现用户长时间未操作自动退出登录

Angularjs实现用户长时间未操作自动退出登录

需求

当用户超过半小时未操作页面,自动退出登录

实现

在入口文件中,设置一个定时器(退出登录),再添加一个全局的点击事件监听函数,当用户有了点击操作后,重置定时器,如果用户长时间未操作,则执行定时器中的退出登录操作

代码

1、在AngularJS的根控制器(myAppController)中,使用$document服务注册一个全局点击事件的监听器。

2、添加一个定时器,定时器内是退出登录的操作,每当监听到用户点击后,重置定时器

javascript 复制代码
(function () {
appModule.controller('myAppController', [
    '$scope', '$document',
    function ($scope, $document) {
      // 此处设置一个全局点击事件监听,用户超过半小时未操作,自动退出登录
      // 获取退出登录a标签(这是根据我的项目实现退出登录的方法,具体情况根据自己的项目来写)
      var btn = document.getElementById('btn-logout');
      // 设置一个定时器
      var timeout = setTimeout(() => {
        console.log('长时间未操作,我要退出啦')
        btn.click();
      }, 1800000)
      // 定义一个监听器,每点击一次,刷新定时器
      var clickListener = function (e) {
        // 先清除定时器
        clearTimeout(timeout);
        // 重置定时器
        timeout = setTimeout(() => {
          console.log('长时间未操作,我要退出啦')
          btn.click();
        }, 1800000)
      }
      // 注册全局点击事件监听器
      $document.on('click', clickListener);
      // 在控制器销毁时,取消全局点击事件监听器
      $scope.$on('$destroy', function () {
        $document.off('click', clickListener);
      });
    }
  ]);
})()
相关推荐
GuWenyue11 分钟前
不用第三方SDK!Vue3原生Fetch实现DeepSeek流式输出,90%前端都会踩的分片解析坑一次性解决
前端·人工智能·llm
独隅13 分钟前
前端离线暂停更新策略:Service Worker 与 PWA 实战指南
前端
不如摸鱼去40 分钟前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
Cloud_bread1 小时前
从ReAct到自主闭环:Agentic Coding核心执行引擎的技术演进
前端·react.js·前端框架
cidy_981 小时前
OptMem 使用教程
前端
满栀5851 小时前
原生JS + ECharts 多图表可视化实战:从业务实现到工程化优化
开发语言·javascript·echarts
杉氧1 小时前
用 Compose 挑战交互与动效天花板:ComposeCraftLab 开源实验室全解析
android·前端·kotlin
Canace1 小时前
AI 生成到 90% 突然断了:你的解决方案是?
前端·人工智能
TinssonTai1 小时前
Vite 8 版 Chrome 插件全家桶,popup/options/sidepanel 一次集齐
前端·vue.js
玉鸯2 小时前
让 Agent 面向用户:AG-UI 协议构建 Agent 前端
前端·python·agent