ng2 idle

介绍

一个用于响应Angular应用程序中空闲用户的模块。这是NG-IDLE模块的重写；但是，如果您使用的是Angular 1，则必须使用该模块。

维护者想要

角度社区需要您！我正在寻找新的开发人员或团队来接管该模块的维护。这些是任何感兴趣的候选人应考虑的责任：

• 现在：完整的beta过程（剩余的主要项目是使其与SSR兼容）
• 现在：更新演示并添加API文档
• 正在进行：错误修复
• 正在进行：新版本的Angular的新版本
• 稍后：重构以简化API并降低包装尺寸
• 稍后：添加对非浏览器环境的支持？

理想情况下，候选人：

• 在Angular 5+中具有构建应用的经验
• 是一个活跃的角开发人员，并调整为角释放时间表
• 喜欢开源和角度社区
• 致力于释放模块化和轻巧的软件包
• 对DOM事件，JavaScript计时器和间隔，Web Storage API和Cookie有努力的了解
• 了解使用业力和茉莉花的测试，并致力于高度的代码覆盖率
• 对贡献指南有努力的理解，愿意接受他人的贡献，并且可以有效地使用github和相关工具
• 有时间分类和回答票，或委派给他人
• 对释放软件包的NPM有基本的了解

如果您有兴趣，请联系！

演示

请访问https://grbsk.github.io/ng2-idle，以查看一个简单的示例，并使用快速启动说明。

快速开始

@ng-idle通过npm发货。您可以使用以下命令安装软件包，以获取最新支持的Angular：

 npm install --save @ng-idle/core

将软件包集成和配置到您的应用程序中需要更多步骤。请访问 @ng-idle-example，以获取有关如何开始的来源和说明。

设计注意事项

该模块的主要应用是检测用户何时闲置。它也可以用来警告用户即将来临的超时，然后将其计时。该模块的核心是Idle服务，它可以根据您的配置来最佳，以检测用户何时处于活动状态或闲置，并将该信息传递给您的应用程序，以便它可以适当响应。

模块化

核心功能可以通过NPM在@ng-idle/core软件包中找到。

扩展功能的其他模块：

• @ng-idle/keepalive （见下文）

可扩展的饲养整合

在用于会话管理的常见用例中，您可能需要定期向服务器发出信号，表明用户仍在登录并处于活动状态。如果需要该功能， @ng-idle可以选择与@ng-idle/keepalive集成。 @ng-idle将在用户处于活动状态时指示@ng-idle/keepalive to ping，并在闲置或超时后停止。当用户恢复活动或空闲状态重置时，它将立即进行ping，然后恢复ping。请注意，KeepAlive集成是可选的，您必须单独安装和配置@ng-idle/keepalive才能获得此功能。您可以通过扩展KeepaliveSvc并将其配置为KeepaliveSvc类应用程序中的提供商来实现自己的实现。

可扩展的中断

中断是任何输入来源（通常来自用户，但可能是其他选项卡或事件），可以用来发出信号以Idle表明闲置手表应被中断或重置。与ng-idle不同，这些来源不是硬编码。您可以扩展InterruptSource或任何内置资源以适合您的目的。此功能对于处理可能困扰您特定用例的输入噪声也很有用。它也可以用于针对页面上的特定元素，而不是整个文档或窗口。以下资源内置在此软件包中：

• InterruptSource （摘要）：您可以实现的基本类型来制作自己的来源。
• EventTargetInterruptSource ：任何实现EventTarget对象，例如HTMLElement或Window 。吸入源是源的对象和一个空间划界字符串，该字符串包含导致中断的事件。
• DocumentInterruptSource ：在document.documentElement （ html节点）中寻找事件（在空间划界字符串中）。
• WindowInterruptSource ：在Window上冒泡的事件（在空间划界字符串中）。
• StorageInterruptSource ：仅查找Window对象的Storage事件。 LocalStorageExpiry的强制性。

注意：初始化应用程序时必须自己配置源。默认情况下，未配置任何中断。您可以通过导入DEFAULT_INTERRUPTSOURCES并将该引用传递给Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);来使用类似于ng-idle默认值的配置； 。

可扩展的到期

ng-idle移植的另一个功能是能够在某个商店中存储有效值的功能，在该商店中，多个运行相同应用程序可以写入的标签或窗口可以写入。通常，这家商店是localStorage ，但可以是cookie或您想要的任何东西。该到期和到期商店的目的是双重的：首先，防止窗口是否睡觉或停顿时间不超过所配置的超时期。其次，可以使用它，以便在一个选项卡中或窗口中的活动防止同一应用程序中的其他选项卡或窗口的计时。

默认情况下，提供了LocalStorageExpiry类型，该类型只会跟踪LocalStorage中的到期。它将满足上述所有目的。如果您不想支持多个标签或窗口，则可以使用SimpleExpiry 。换句话说， SimpleExpiry不会协调选项卡或Windows之间的最后一个活动。如果要将到期值存储在另一家商店（例如cookie）中，则需要使用或创建支持该的实现。您可以通过扩展IdleExpiry或SimpleExpiry创建自己的创建，并将其配置为IdleExpiry类的提供商。

多个空闲实例支持

角度的依赖性注射器支持分层注入策略。这使您可以在所需的任何范围内创建一个Idle的实例，并且可以有一个以上的实例。这使您可以在页面上的两个不同元素上拥有两个单独的手表。
如果您使用默认有效期（ LocalStorageExpiry ），则需要使用Idle.setIdleName('yourIdleName')定义每个空闲的名称，否则在LocalStorage中将使用相同的键，并且此功能将无法按预期工作。

示例用例

例如，考虑电子邮件应用程序。为了提高安全性，该应用程序可能希望确定用户何时不活动并将其注销，从而使他们有机会在他们仍在计算机上并分散注意力的情况下扩展了会话。此外，为了更好的安全性，服务器可能会发布用户会话的安全令牌，该标记在不活动5分钟后到期。用户可能需要花费更多的时间来输入他们的电子邮件并发送。当您积极使用该软件时，发现您已被登录会令人沮丧！

@ng-idle/core可以检测到用户正在单击，键入，触摸，滚动等，并且知道用户仍然处于活动状态。它可以与@ng-idle/keepalive一起使用每隔几分钟的服务器来ping服务器，以使它们登录。在这种情况下，只要用户正在做某事，他们就会登录。如果它们远离计算机，我们可以提出警告对话框，然后在倒计时后列出它们。

服务器端渲染/通用

@ng-idle/core使用各种目标上的DOM事件来检测用户活动。但是，当使用SSR/Universal渲染时，该应用程序并不总是在浏览器中运行，因此可能无法访问这些DOM目标，从而导致您的应用程序可能会崩溃或投掷错误，因为它试图使用 @ng-idle的document和窗口，例如文档和window 。

EventTargetInterruptSource和所有从其衍生的中断源（例如DocumentInterruptSource ， WindowInterruptSource和StorageInterruptSource ）旨在懒惰地初始化事件目标侦听器，以兼容服务器端渲染。 EventTargetInterruptSource将通过使用isPlatformServer检测您的应用程序是在浏览器中还是在服务器上运行，并在服务器上运行时跳过事件目标侦听器的初始化。

发展

该项目是使用.nvmrc文件中的Nodejs版本开发的。您可能会使用较旧版本遇到问题。尝试NVM或类似于同时管理不同版本的节点。如果使用NVM，则可以执行nvm install以下载并切换到正确的版本。

克隆存储库后，请使用npm安装所有软件包：

 npm install

现在，您可以在覆盖范围内构建并运行所有测试。

 npm test

如果您在全球安装了@angular/cli则可以通过执行npm run ng test <project name>或ng test <project name>在更改项目时连续运行测试。

 npm run ng test core
...
npm run ng test keepalive

注意：保存取决于核心。如果您正在运行上述连续测试，则需要首先和更改核心后的npm build或npm run ng build core Core。但是， npm test将构建所有模块，并一击进行测试。

贡献

请参阅贡献指南。