用戶以角度登錄后如何檢查所有選項卡中的一個空閑超時

Question

我需要在用戶登錄后檢查不活動用戶。 用戶可以在不同的選項卡中使用該應用程序。 我為此任務實施了一些解決方案，但每個都有一些問題。

1. 使用 idle-ng 庫：它僅適用於一個選項卡（我在登錄組件中調用它），如果我在應用程序組件中調用它，它只運行一次，注銷后，它不會在登錄組件中運行。
2. using @hostlistener('click')：例如，當我在應用程序組件中調用它時，它只在一個選項卡中運行，而不在其他選項卡中檢查。

請你幫助我好嗎。

Answer 1

本地存儲？

它是按域而不是按選項卡綁定的，因此您可以在其中存儲您的最后一個活動時間戳。

app.component （大概）：

private readonly userActivityKey: string = 'user-activity';

@HostListener...

public ngOnInit(): void {
    setInterval(() => this.checkUserActivity(), 60000); // that's a minute, right?
}

public onClickEvent(): void {
    localStorage.setItem(this.userActivityKey, new Date());
}

private checkUserActivity(): void {
    const lastActiveDateTime = localStorage.getItem(this.userActivityKey);
    // check the time...
}

每個選項卡都會在單擊時更新本地存儲值，並且所有選項卡都會從其計時器上的同一位置讀取。

訪問本地存儲並不昂貴，以至於每分鍾左右都有 50 個選項卡全部訪問它。