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

Question

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

我正在使用Angular 2.4版的angular CLI

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

Answer 1

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

它不是专门针对角形的，但它是用书面形式编写的，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 2

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 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 - 使用 ng2-idle 注销可能会有所帮助。