Déconnexion automatique Angulaire 2 après quelques minutes

Je veux implémenter une fonction (dans Angular2) c'est à dire Après la connexion, si un utilisateur conserve navigateur inactif pendant 30 minutes, il doit être déconnecté lorsque de retour après 30 minutes. Ce qui doit être fait par l'avant uniquement.

Je suis angulaire à l'aide de la CLI Angulaire de la version 2.4

Comment puis-je mettre en œuvre cette fonctionnalité dans mon Angular2 application?

Jetez un oeil à ng-idle module github.com/HackedByChinese/ng-idle
ng-idle est angularjs de la bibliothèque, il est à l'aide de angular dans ce cas, github.com/HackedByChinese/ng2-idle faire

InformationsquelleAutor Er Vipin Sharma | 2017-08-28

J'avais besoin de faire la même chose et créé ce: https://github.com/harunurhan/idlejs

Il n'est pas spécifiquement angulaire, mais il est écrit dans typescript de sorte que vous obtenez officiel typings.

Il est simple et configurable, sans dépendances. Quelques exemples:

import { Idle } from 'idlejs/dist';

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

Vous pouvez également utiliser événement personnalisé cibles et les événements:

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

InformationsquelleAutor harunurhan

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']);
    }
  }
}

Je pensais que le code a été utile, merci. J'ai juste ajouté un couple de choses pour elle. Je suis l'appel de l'init routines explicitement, car j'ai trouvé qu'ils n'étaient pas appelée dans le constructeur, au moment approprié. (pas très bien pourquoi). J'ai aussi appeler "détruire" méthode qui supprime les écouteurs d'événement trop. Enfin, dans la méthode de contrôle de j'ai également vérifier pour voir si elles sont actuellement connecté ou non. Je trouve sinon que j'ai été transféré à la page de connexion à partir de zones de mon application où l'utilisateur n'a pas besoin d'être connecté.
Heureux qu'il pourrait aider.Vous pouvez apporter des modifications en fonction de votre exigence. Il y a plusieurs façons de le faire. Vérifier pourrait être fait après l'initialisation ainsi.
pouvez-vous me dire, comment en œuvre et utiliser cela? où dois-je l'ajouter dans le module.ts et comment la page web de réagir et de déconnexion automatique? dois-je l'ajouter en quelque sorte dans chaque contrôleur ou puis-je faire cela à l'échelle mondiale? merci
Depuis son un service, de les fournir dans votre module parent comme app-module. Ainsi,il sera disponible tout au long de votre projet. Vous devez mettre à jour localstorage valeur sur chaque page où vous souhaitez démarrer la déconnexion automatique de la fonctionnalité. Dans mon cas,c'était après la page de connexion.

InformationsquelleAutor Nabin Kumar Khatiwada

2

Fondamentalement, ce que vous devez faire est de définir un indicateur dans le cas de toute l'activité du client et que au bout de 30 minutes, vous devez vérifier que le drapeau. Si l'indicateur n'était pas de définir ce qui signifie que l'utilisateur n'a pas à être actif, de sorte que vous pouvez effectuer une logout() action.

Voici quelques exemple de code(à l'aide de ngrx) que vous pourriez trouver utiles.
```
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 est un service qui vient de emmiting une action si le client a été active. Quelque part, comme dans app.component.ts vous avez à injecter que le service et appel this.clientActiveService.run();

Puis, quelque part dans votre code, vous devez configurer un 30 minutes minuterie lorsque vous vous abonnez pour un ClientInactiveAction action
```
    setInterval(() => {
      this.store.select(fromRoot.getClientActive)
      .take(1)
      .subscribe((active) => {
        if (!active) {
          this.auth.logout();
        }
      });
    }, 30 * 60 * 1000);
```
Si vous n'êtes pas à l'aide de ngrx, vous pouvez simplement mettre un variable/flag au lieu de
ClientActiveService service. Puis dans setTimeout() il suffit de cocher pour
cette variable et effectuer votre logout() action

Sinon vous risquez de vous voulez utiliser ng2-idle de la bibliothèque. Dans ce cas Angulaire 2 - Déconnexion à l'aide de ng2-idle pourrait aider.
- je suis entrain de créer ClientActiveService, mais elle présente une erreur dans le constructeur de cette classe: "impossible de trouver de l'espace de noms fromRoot'
- si vous n'êtes pas à l'aide de ngrx il suffit de prendre le private store: Store<fromRoot.State> et tout code qui lui appartient
- import * as fromRoot from '@ngrx/store'; pas de coutures à droite. Vous devez importer à partir de votre reducers quelque chose comme import * as fromRoot from '../reducers'; viens de mettre le droit chemin.
- Pouvez vous s'il vous plaît dites-moi, ce serait dans le " réducteurs.ts fichier???
- vous définissez vos propres réducteurs dans votre application, vérifiez les ngrx guide gist.github.com/btroncone/a6e4347326749f938510 et github.com/ngrx/platform/tree/master/example-app plus de détails
- fenêtre onclick et fenêtre onscroll ne fonctionne pas pour moi. document onclick travaille mieux.
InformationsquelleAutor Kuncevič

Vous devez vous connecter pour publier un commentaire.