Как вы можете отображать предупреждение таймаута сеанса, достаточно умное для обработки нескольких открытых браузеров или вкладок

Ответ 1

Вам нужно будет проверить состояние сеанса на сервере с помощью Ajax и отслеживать все открытые сеансы/окна, которые пользователь имеет. Затем вы сможете настроить таргетинг только на один из доступных сеансов с предупреждением о выходе из системы.

В ответ на ваш комментарий:

Не используйте встроенный механизм сеанса, создайте свой собственный, используя массив на стороне сервера или журнал базы данных.

Нет, ничего в HTTP-запросе не указывает, сколько браузеров открыто, но вы можете назначить свой собственный cookie sessionID, когда пользователь открывает каждое окно браузера. Выполните вызов Ajax на сервер, посмотрите, есть ли у пользователя тайм-аут, и если вы являетесь самой низкой (или последней) записью в журнале сеансов, то вы являетесь браузером, который получает предупреждение.

Ответ 2

Вы не можете рассчитывать на то, что все вкладки/окна будут частью одного и того же сеанса, потому что они могут быть порождены и содержаться в отдельных процессах, и вы не имеете большого контроля над этим.

Но если ваш код ссылается на куки файл Javascript, вы можете проверить свое псевдосессионное состояние с помощью обратной передачи (синхронный или асинхронный AJAX). Но тогда вы в зависимости от того, какие файлы cookie включены в браузере пользователя.

Ответ 3

Будет ли это работать?

Сохраните файл cookie Javascript и проверьте, чтобы определить, был ли сеанс расширен на другой вкладке?

похоже, что это работает...

Ответ 4

Установить @ng-idle @ng-idle доступен через NPM. Установите его, запустив:

npm install --save @ng-idle/core @ng-idle/keepalive angular2-moment

Настройте модуль приложения Откройте src/app/app.module.ts и импортируйте модуль Ng2IdleModule, используя

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // this includes the core NgIdleModule but includes keepalive providers for easy wireup

import { MomentModule } from 'angular2-moment'; // optional, provides moment-style pipes for date formatting

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MomentModule,
    NgIdleKeepaliveModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

затем в component.ts

import { Component } from '@angular/core';

import {Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
import {Keepalive} from '@ng-idle/keepalive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    currentPath: String;

    idleState = 'Not started.';
    timedOut = false;
    lastPing?: Date = null;

    constructor(private idle: Idle, private keepalive: Keepalive, location: Location, router: Router) {

        // sets an idle timeout of 5 seconds, for testing purposes.
        idle.setIdle(5);

        // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
        idle.setTimeout(5);

        // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
        idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

        idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');

        idle.onTimeout.subscribe(() => {
            this.idleState = 'Timed out!';
            this.timedOut = true;
        });

        idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
        idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');

        // Sets the ping interval to 15 seconds
        keepalive.interval(15);

        keepalive.onPing.subscribe(() => this.lastPing = new Date());

        // Lets check the path everytime the route changes, stop or start the idle check as appropriate.
        router.events.subscribe((val) => {

            this.currentPath = location.path();
            if(this.currentPath.search(/authentication\/login/gi) == -1)
                idle.watch();
            else
                idle.stop();

        });
    }

    reset() {
        this.idle.watch();
        this.idleState = 'Started.';
        this.timedOut = false;
    }
}