@aakashsuryawanshi/ng-idle 中文文档教程

Question

Introduction

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

MAINTAINERS WANTED

Angular 社区需要你！ 我正在寻找新的开发人员或团队来接管此模块的维护工作。 这些是任何有兴趣的候选人都应该考虑的责任：

• Now: Complete beta process (major remaining item is to make it compatible with SSR)
• Now: Update demo and add API documentation
• Ongoing: Bug fixes
• Ongoing: New releases for new versions of Angular
• Later: Refactor to simplify API and reduce package size
• Later: Add support for non-browser environments?

理想情况下，候选人：

• Has experience building applications in Angular 5+
• Is an active Angular developer and tuned into the Angular release schedule
• Loves open source and the Angular community
• Is committed to releasing modular and lightweight (as possible) packages
• Has working understanding of DOM events, JavaScript timers and intervals, Web Storage API, and cookies
• Understands testing using Karma and Jasmine, and is committed to a high percentage of code coverage
• Has working understanding of the contributing guide, is willing to accept contributions from others, and can use Github and related tools effectively
• Has time to triage and answer tickets, or delegate to others
• Has basic understanding of NPM for releasing packages

如果您有兴趣，请联系我们！

License

作者为 Mike Grabski @moribvndvs

有关许可详细信息，请参阅LICENSE。

Demo

访问 https://moribvndvs.github.io/ng2-idle 查看带有快速入门说明的简单示例。

Quick start

@ng-idle 通过 npm 发布。 对于最新支持的 Angular 版本，您可以使用以下命令安装该包：

npm install --save @ng-idle/core

将包集成和配置到您的应用程序中还需要几个步骤。 请访问 @ng-idle-example 获取源代码和如何开始的说明。

Design Considerations

该模块的主要应用是检测用户何时空闲。 它还可以用于警告用户即将发生超时，然后让他们超时。 此模块的核心是 Idle 服务，它会根据您的配置尽最大努力检测用户何时处于活动或空闲状态，并将该信息传递给您的应用程序，以便它可以做出适当的响应。

Modularization

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

用于扩展功能的附加模块：

• @ng-idle/keepalive (see below)

Extensible Keepalive Integration

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

Extensible Interrupts

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

• InterruptSource (abstract): A base type you can implement to make your own source.
• EventTargetInterruptSource: Any object that implements EventTarget, such as an HTMLElement or Window. Takes in the object that is the source and a space delimited string containing the events that cause an interrupt.
• DocumentInterruptSource: Looks for events (in a space delimited string) that bubble up to the document.documentElement (html node).
• WindowInterruptSource: Looks for events (in a space delimited string) that bubble up to the Window.
• StorageInterruptSource: Looks only for the Storage event of Window object. Obligatory for LocalStorageExpiry.

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

Extensible Expiry

从 ng-idle 移植的另一个特性是能够在一些存储中存储到期值，运行相同应用程序的多个选项卡或窗口可以写入这些存储。 通常，这个存储是 localStorage，但也可以是 cookie 或任何你想要的。 这个过期和过期存储的目的是双重的：首先，如果窗口休眠或暂停时间超过配置的超时时间，则防止窗口不超时。 其次，它可用于使一个选项卡或窗口中的活动防止同一应用程序中的其他选项卡或窗口超时。

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

Multiple Idle Instance Support

Angular 中的依赖注入器支持分层注入策略。 这允许您在您需要的任何范围内创建一个 Idle 实例，并且可以有多个实例。 这允许你们两个有两个单独的手表，例如，在页面上的两个不同元素上。
如果您使用默认过期时间 (LocalStorageExpiry)，则需要使用 Idle.setIdleName('yourIdleName') 为每个空闲定义一个名称，否则相同的密钥将在 localStorage 中使用，此功能将无法按预期工作。

Example Use Case

例如，考虑一个电子邮件应用程序。 为了提高安全性，应用程序可能希望确定用户何时处于非活动状态并将他们注销，如果他们仍在计算机前并且只是分心，则让他们有机会延长他们的会话。 此外，为了更好的安全性，服务器可能会向用户的会话颁发一个安全令牌，该令牌会在 5 分钟不活动后过期。 用户可能需要比这更多的时间来输入他们的电子邮件并发送它。 如果您在积极使用该软件时发现您已注销，那将是令人沮丧的！

@ng-idle/core 可以检测到用户正在点击、打字、触摸、滚动等，并知道用户仍然处于活动状态。 它可以与 @ng-idle/keepalive 一起工作，每隔几分钟 ping 服务器以保持登录状态。在这种情况下，只要用户正在做某事，他们就会保持登录状态。如果他们离开电脑一步，我们可以呈现一个警告对话框，然后在倒计时后，将它们注销。

Developing

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

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

npm install

您现在可以一次构建并运行所有测试并覆盖。

 npm test

如果您有 npm run ng test 或 ng test ，您还可以在对项目进行更改时连续运行测试code>@angular/cli 全局安装。

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

注意：Keepalive 依赖于 Core。 如果您正在运行上述连续测试，则需要先npm build 或npm run ng build core，然后再对 Core 进行更改。 但是，npm test 将一次性构建所有模块并运行测试。

Contributing

请参阅贡献指南。