Angular 앱에서 유휴 사용자 감지

tldr;

때때로 우리가 작업하는 애플리케이션은 사용자가 일정 시간 동안 활동하지 않는 경우 특정 방식으로 반응해야 합니다. 예를 들어 사용자가 5분 동안 활동이 없으면 팝업이 나타나 사용자에게 로그인 상태를 유지할 것인지 로그아웃할 것인지 묻습니다. 이 기사에서는 Angular 앱에서 이를 수행하는 방법을 살펴보겠습니다. 이를 위해 @ng-idle/core 및 @ng-idle/keepalive 의 두 라이브러리를 사용합니다.

유휴 사용자 감지

시작하려면 필요한 모듈을 루트AppModule로 가져오십시오.

// app.module.ts
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

@NgModule({
    imports: [NgIdleKeepaliveModule.forRoot()]
})

NgIdleKeepaliveModule를 가져오면 애플리케이션이 설정되고 유휴 사용자를 감지할 준비가 됩니다. 다음으로 대부분의 작업이 수행되는 AppComponent 로 이동합니다. core 모듈에서 몇 가지 설정을 초기화해야 합니다. 살펴보고 토론해 봅시다.

// app.component.ts
import { DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';

export class AppComponent implements OnInit {
    private numberOfSeconds: number = 5;

    constructor(private _idle: Idle) {}

    ngOnInit() {
        this._idle.setIdle(numberOfSeconds);
        this._idle.setTimeout(numberOfSeconds);
        this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
    }
}

다음 줄을 좀 더 자세히 살펴보겠습니다.

setIdle 메서드는 사용자가 유휴 상태임을 확인하기 전에 대기할 시간을 설정합니다. 값은 초 단위로 제공됩니다. 이 시간 동안 애플리케이션은 유휴 사용자에 대해 아무 작업도 수행하지 않습니다.

setTimeout 메서드는 제한 시간이 지속되는 시간을 결정합니다. 즉, 위의 예를 사용하면 응용 프로그램은 사용자가 유휴 상태임을 확인하기 전에 5초 동안 대기합니다. 이 시점에서 사용자는 제한 시간이 만료되기 전에 응용 프로그램에 일부 활동을 등록할 수 있는 5초(제한 시간 길이)가 있습니다.

setInterrupts 메서드는 이벤트 배열을 사용합니다. 이러한 이벤트는 제한 시간을 중단하고 다시 시작합니다. 기본값은 mousemove , keydown , DOMMouseScroll , mousewheel , mousedown , touchstart , touchmove 및 scroll 입니다.

이러한 초기화 값을 설정한 후에는 경고를 표시하거나 숨기거나 사용자를 로그아웃해야 하는 시점을 알아야 합니다. 우리가 듣게 될 가장 중요한 사건이라고 생각하는 것을 보여드리겠습니다.

// app.component.ts

ngOnInit() {
    this._idle.setIdle(numberOfSeconds);
    this._idle.setTimeout(numberOfSeconds);
    this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    this._idle.onIdleStart.subscribe(() => {
        // show the modal
    });

    this._idle.onIdleEnd.subscribe(() => {
        // hide the modal
    });

    this._idle.onTimeoutWarning.subscribe((secondsLeft: number) => {
        // Update the warning message
    });

    this._idle.onTimeout.subscribe(() => {
        // Hide the modal, log out, do something else
    });
}

이러한 각 이벤트에 대해 자세히 이야기해 보겠습니다.

onIdleStart 메서드는 사용자가 유휴 상태가 되면 실행됩니다. 이것은 numberOfSeconds가 setIdle 메서드로 전달된 후입니다.

onIdleEnd 이벤트는 사용자가 더 이상 유휴 상태가 아닐 때 발생합니다.

onTimeoutWarning는 setTimeout 메서드에 제공된 기간 동안 매초 발생합니다. 따라서 해당 값을 5로 설정하면 onTimeoutWarning가 5, 4, 3, 2 및 1에서 실행됩니다.

지정된 시간이 만료되면 onTimeout 이벤트가 발생합니다. 이 시간은 setIdle 금액과 setTimeout 금액입니다.

위의 코드를 사용하면 사용자가 유휴 상태인지 여부를 확인하고 시간 초과에 반응하는 데 필요한 모든 것이 있어야 합니다. 마지막 단계는 유휴 사용자를 감시하는 서비스를 시작하는 것입니다. watch 메서드를 사용하여 이를 수행할 수 있습니다.

ngOnInit() {
    . . .
    this._idle.watch()
}

watch 메서드는 서비스를 시작하고 위에 나열된 작업을 감시합니다. 이 메서드를 호출하지 않으면 앱에서 아무 일도 일어나지 않고 분명 답답할 것입니다.

If you need to stop the timer, you can call the stop method if you want to turn the service off and stop watching for idle users.

결론

유휴 사용자를 감시하는 이 방법은 작업을 수행하는 빠르고 쉬운 방법이었습니다. 이를 통해 사용자가 일정 시간 동안 유휴 상태가 될 때까지 기다렸다가 유휴 상태이면 로그아웃할 수 있었습니다. 사용 사례에 따라 수행할 수 있는 다른 작업도 있습니다.