几分钟后在Angular 2中自动注销

Question

我想实现一个功能（在 Angular2 中），即登录后，如果用户保持浏览器空闲 30 分钟，他应该在 30 分钟后回来时注销。这只能由前端完成。

我正在使用 Angular 2.4 版的 Angular CLI

如何在我的 Angular2 应用程序中实现此功能？

Answer 1

import { Injectable } from "@angular/core";
import { Router } from '@angular/router'
const MINUTES_UNITL_AUTO_LOGOUT = 60 // in mins
const CHECK_INTERVAL = 15000 // in ms
const STORE_KEY =  'lastAction';
@Injectable()
export class AutoLogoutService {
 public getLastAction() {
    return parseInt(localStorage.getItem(STORE_KEY));
  }
 public setLastAction(lastAction: number) {
    localStorage.setItem(STORE_KEY, lastAction.toString());
  }

  constructor(private router: Router) {
    this.check();
    this.initListener();
    this.initInterval();
    localStorage.setItem(STORE_KEY,Date.now().toString());
  }

  initListener() {
    document.body.addEventListener('click', () => this.reset());
    document.body.addEventListener('mouseover',()=> this.reset());
    document.body.addEventListener('mouseout',() => this.reset());
    document.body.addEventListener('keydown',() => this.reset());
    document.body.addEventListener('keyup',() => this.reset());
    document.body.addEventListener('keypress',() => this.reset());
  }

  reset() {
    this.setLastAction(Date.now());
  }

  initInterval() {
    setInterval(() => {
      this.check();
    }, CHECK_INTERVAL);
  }

  check() {
    const now = Date.now();
    const timeleft = this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;

    if (isTimeout)  {
      localStorage.clear();
      this.router.navigate(['./login']);
    }
  }
}

Answer 2

我需要做类似的事情并创建了这个：https://github.com/harunurhan/idlejs

它不是专门针对 Angular 的，但它是用typescript 编写的，所以你可以得到官方的打字。

它简单且可配置，没有任何依赖关系。一些例子：

import { Idle } from 'idlejs/dist';

// with predefined events on `document`
const idle = new Idle()
  .whenNotInteractive()
  .within(60)
  .do(() => console.log('IDLE'))
  .start();

您还可以使用自定义事件目标和事件：

const idle = new Idle()
  .whenNot([{
    events: ['click', 'hover'],
    target: buttonEl,
  },
  {
    events: ['click', 'input'],
    target: inputEl,
  },
  ])
  .within(10)
  .do(() => called = true)
  .start();

Answer 3

基本上，您需要做的是设置一个标志以防任何客户端活动，然后在 30 分钟后您必须检查该标志。如果未设置标志，则表示用户未处于活动状态，因此您可以执行logout() 操作。

这里有一些你可能会觉得有用的代码示例（使用ngrx）。

export class ClientActiveService {
  constructor(
    private store: Store<fromRoot.State>,
  ) { }

  run() {
    window.onload = () => { this.setActive(); };
    window.onmousemove = () => { this.setActive(); };
    window.onmousedown = () => { this.setActive(); }; 
    window.onclick = () => { this.setActive(); };
    window.onscroll = () => { this.setActive(); }; 
    window.onkeypress = () => { this.setActive(); };
  }

  setActive() {
     this.store.select(fromRoot.getClientActive)
     .take(1)
     .subscribe((active) => {
        if (!active) {
          this.store.dispatch(new layout.ClientActiveAction());
        }
      });
  }
}

ClientActiveService 是一个服务，如果客户端处于活动状态，它只会发出一个动作。在app.component.ts 之类的某个地方，您必须注入该服务并调用this.clientActiveService.run();

然后，您必须在代码中的某个位置设置一个 30 分钟的计时器，您可以在其中订阅 ClientInactiveAction 操作

    setInterval(() => {
      this.store.select(fromRoot.getClientActive)
      .take(1)
      .subscribe((active) => {
        if (!active) {
          this.auth.logout();
        }
      });
    }, 30 * 60 * 1000);

如果你不使用ngrx，你可以设置一个variable/flag 来代替 ClientActiveService 服务。然后在setTimeout() 中检查 该变量并执行您的logout() 操作

否则你可能想使用ng2-idle 库。在这种情况下，Angular 2 - Logout using ng2-idle 可能会有所帮助。