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);
      });
    }
  ]);
})()
相关推荐
Lazy_zheng2 分钟前
TDD 实战:Claude Code Superpowers 保姆级教程14 个 Skills 全解析 + 实战开发
前端·claude·vibecoding
胡萝卜术2 分钟前
从逐一合并到多路归并:力扣23「合并K个升序链表」的三种解法进化之路
前端·javascript·面试
名字还没想好☜2 分钟前
React 受控与非受控组件:表单场景怎么选
前端·javascript·react.js·react·表单·受控组件
Damai4 分钟前
Radix UI导致右侧白条
前端
weedsfly12 分钟前
前端开发中的策略模式——告别 if-else 的优雅之道
前端·javascript·面试
不坑老师13 分钟前
怎么在Word中制作汉字书写笔顺——不坑盒子汉字笔顺步骤在小学低段识字教学中的应用
前端·数据库·人工智能·word·excel·office
许我半盏清茶14 分钟前
基于 Ollama + Vectra + MCP 从零搭建本地 RAG 知识库
javascript·人工智能·mcp
anyup19 分钟前
30 分钟用 Trae Work + 魔珐星云做出会讲故事的 AI 3D 具身交互智能数字人
前端·ai编程·trae
IT_陈寒35 分钟前
Vue的响应式竟然在这常见操作下失效了
前端·人工智能·后端
你怎么知道我是队长35 分钟前
JavaScript 事件介绍
开发语言·前端·javascript