Question

我想实现一个功能（在Angular2中），即登录后，如果用户让浏览器闲置30分钟，他应该在30分钟后回来时退出。这必须由前端完成。

我正在使用Angular版本2.4的角度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 - Logout using ng2-idle可能有所帮助。

几分钟后自动注销Angular 2

3 个答案: