web-dev-qa-db-ja.com

Angular 6 ng-idle

私はAngularプロジェクトがうまく機能していて、セッションを新鮮に保ち、APIセッションが期限切れになる前にユーザーをログアウトさせるために、NG-IDLEとKeepAliveを実装しています。

私の問題は、ng-idleがログインページでも動作していることです。タイムアウトが発生すると、ユーザーはログインページに移動するため、明らかに必要ありません。

したがって、ng-idleとKeepAliveをapp.component.tsで稼働させていますが、遅延ロードを使用しているため、authentication.module.tsとlogin.component.tsも使用しています。

ルートapp.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 {

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

    constructor(private idle: Idle, private keepalive: Keepalive) {

        // 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());

        this.reset();
    }

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

必要に応じて、idle.unwatchを呼び出して、idle runningとidle.watchを呼び出す必要があることを知っていますが、ログインまたは認証モジュールからこれらを呼び出す方法、またはルートapp.componentから検出する方法はありますか。 ts？

間違いなく、私がAngularを初めて使用していることがわかるので、これが新人の質問である場合は謝罪してください。

angularkeep-aliveng-idle
2
Jim Grant

1つの方法は、ログイン以外のルートのホームを持つことです。すべての監視および監視解除ロジックは、app.component.tsからここに移動できます

app.routing.tsで

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '', component: HomeComponent,
        children: [
            // add auth requiring routes here
        ]
    }
];

home.component.ts内

export class HomeComponent implements OnDestroy {
    constructor() {
        // start watching here
    }  

    ngOnDestroy() {
        // unwatch here
    }
}

home.component.html

<router-outlet></router-outlet>
0
user2191410