前端實現(xiàn)空閑時注銷登錄，so easy！
React Idle Timer 是一個 JavaScript 庫，用于檢測和監(jiān)控Web應用上的用戶活動。它提供了一個IdleTimer組件，可以監(jiān)測用戶的鼠標移動、鍵盤輸入和觸摸等事件，以確定用戶是否處于活動狀態(tài)。在React應用中，可以通過React Idle Timer實現(xiàn)空閑注銷登錄功能，即在用戶在一段時間內沒有活動的情況下，自動結束其會話，從而提高應用的安全性。
空閑注銷登錄是一種重要的安全措施，即用戶在一段時間內無活動后自動終止其會話。在涉及敏感信息的場景中，這一功能尤為重要，因為它能有效防止未經授權的訪問和用戶忘記注銷登錄時可能引發(fā)的濫用，比如很多銀行 App 在五分鐘無活動就會自動注銷登錄。
那我們該如何實現(xiàn)這個功能呢？今天就來分享一個很實用的工具庫——React Idle Timer，幫助你快速實現(xiàn)空閑注銷登錄！
概念
React Idle Timer 是一個 JavaScript 庫，用于檢測和監(jiān)控Web應用上的用戶活動。它提供了一個IdleTimer組件，可以監(jiān)測用戶的鼠標移動、鍵盤輸入和觸摸等事件，以確定用戶是否處于活動狀態(tài)。在React應用中，可以通過React Idle Timer實現(xiàn)空閑注銷登錄功能，即在用戶在一段時間內沒有活動的情況下，自動結束其會話，從而提高應用的安全性。
空閑注銷登錄的實現(xiàn)通常需要前端和后端的協(xié)同工作。前端部分通過捕捉用戶活動，如鼠標移動、點擊或鍵盤輸入等事件，來不斷更新用戶的活躍狀態(tài)。一旦這些事件停止發(fā)生，前端會啟動一個計時器，并持續(xù)監(jiān)控用戶是否恢復活動。與此同時，后端服務器也在跟蹤用戶的最后活動時間。如果后端在一定時間內沒有收到來自前端的任何新活動信號，并且計時器超過了預設的閾值，服務器就會判定用戶已處于空閑狀態(tài)，并主動結束其會話。這種前后端結合的實現(xiàn)方式，確保了空閑注銷登錄的準確性和可靠性。即便在前端出現(xiàn)意外情況（如瀏覽器崩潰），后端仍能通過監(jiān)控最后活動時間來保障用戶會話的安全。而前端部分就可以借助 React Idle Timer 來實現(xiàn)。
React Idle Timer 的應用場景如下：
- 自動注銷登錄：在涉及敏感信息的應用中，如銀行應用、電商網(wǎng)站等，空閑注銷登錄功能尤為重要。React Idle Timer可以監(jiān)測用戶在一段時間內的活動狀態(tài)，如果用戶長時間沒有交互操作，可以自動結束其會話，防止未經授權的訪問。
- 顯示閑置提示：當用戶在一段時間內沒有進行任何操作時，應用可以利用React Idle Timer來觸發(fā)閑置提示的顯示。這可以提醒用戶他們當前的會話仍然處于活躍狀態(tài)，或者提供繼續(xù)操作的指引。
- 保存用戶數(shù)據(jù)：在用戶可能因為各種原因暫時離開應用時，React Idle Timer可以檢測到用戶的空閑狀態(tài)，并觸發(fā)數(shù)據(jù)保存機制。這有助于防止用戶數(shù)據(jù)因意外情況而丟失，提高數(shù)據(jù)的安全性。
- 優(yōu)化廣告展示：在廣告展示類的應用中，React Idle Timer可以幫助開發(fā)者更精準地判斷用戶的活躍狀態(tài)，從而調整廣告的展示策略。例如，在用戶長時間未進行交互時，可以暫停或調整廣告的播放，提升用戶體驗。
- 提升應用性能：通過監(jiān)測用戶的空閑狀態(tài)，React Idle Timer還可以幫助開發(fā)者優(yōu)化應用的性能。例如，在用戶空閑時，可以降低應用的刷新率或暫停某些后臺進程，從而節(jié)省系統(tǒng)資源。
使用
首先，在終端中輸入以下命令來創(chuàng)建一個基于 Vite 的 React 項目：
yarn create vite vite-idle-timer --template react-ts
cd vite-idle-timer然后，通過以下命令來安裝 react-idle-timer：
yarn add react-idle-timer安裝完成之后就可以在項目中使用 react-idle-timer 了。下面就來看看如何在項目中使用 react-idle-timer。
useIdleTimer
react-idle-timer 中的 useIdleTimer Hook 是用于檢測用戶是否空閑的主要機制，即用戶在一定時間內沒有與應用進行交互。其語法如下：
function useIdleTimer({
timeout,
promptTimeout,
promptBeforeIdle,
element,
events,
timers,
immediateEvents,
onPresenceChange,
onPrompt,
onIdle,
onActive,
onAction,
onMessage,
debounce,
throttle,
eventsThrottle,
startOnMount,
startManually,
stopOnIdle,
crossTab,
name,
syncTimers,
leaderElection,
disabled
}?: IIdleTimerProps): IIdleTimer這個 Hook 包含了很多參數(shù)，那咱就來通過 的類型來看看這些參數(shù)都是干嘛用的：
export interface IIdleTimerProps {
/**
* 用于類組件的 IdleTimer 引用。
*
* @default undefined
*/
ref?: RefObject<IIdleTimer>;
/**
* 空閑超時時間，以毫秒為單位。
*
* @default 1200000（20分鐘）
*/
timeout?: number;
/**
* 當用戶處于空閑狀態(tài)時，會調用 onPrompt 函數(shù)，并且在達到提示超時時間（以毫秒為單位）后，會調用 onIdle 函數(shù)。
*
* @default 0（已棄用，請使用 promptBeforeIdle）
* @deprecated use promptBeforeIdle
*/
promptTimeout?: number;
/**
* 在超時之前的毫秒數(shù)內調用 onPrompt 事件處理程序。
*
* @default 0
*/
promptBeforeIdle?: number;
/**
* 綁定活動監(jiān)聽器的元素。
*
* @default document
*/
element?: Document | HTMLElement;
/**
* 監(jiān)視活動事件的 DOM 事件。
*
* @default DefaultEvents
* @link [默認事件](https://idletimer.dev/docs/props#events).
*/
events?: EventsType[];
/**
* 將繞過超時并立即觸發(fā) onPrompt/onIdle 事件的 DOM 事件。此數(shù)組中的事件優(yōu)先于 events 數(shù)組中的事件。
*
* @default []
*/
immediateEvents?: EventsType[];
/**
* 當用戶的在線狀態(tài)發(fā)生變化時調用的函數(shù)。
*
* @default () => {}
*/
onPresenceChange?: (presence: PresenceType, idleTimer?: IIdleTimer) => void;
/**
* 當設置了 promptTimeout 時，此函數(shù)在用戶處于空閑狀態(tài)后被調用。這對于顯示確認提示很有用。如果達到了提示超時，隨后會調用 onIdle。
*
* @default () => {}
*/
onPrompt?: (event?: Event, idleTimer?: IIdleTimer) => void;
/**
* 當用戶處于空閑狀態(tài)時調用的函數(shù)。
*
* @default () => {}
*/
onIdle?: (event?: Event, idleTimer?: IIdleTimer) => void;
/**
* 當用戶變得活躍時調用的函數(shù)。
*
* @default () => {}
*/
onActive?: (event?: Event, idleTimer?: IIdleTimer) => void;
/**
* 在用戶活動時調用的函數(shù)?？梢允褂?`throttle` 和 `debounce` 屬性進行節(jié)流或防抖。
*
* @default () => {}
*/
onAction?: (event?: Event, idleTimer?: IIdleTimer) => void;
/**
* 當消息被發(fā)出時調用的函數(shù)。
*
* @default () => {}
*/
onMessage?: (data: any, idleTimer?: IIdleTimer) => void;
/**
* 通過設置延遲（以毫秒為單位）來防抖 onAction 函數(shù)。
*
* @default 0
*/
debounce?: number;
/**
* 通過設置延遲（以毫秒為單位）來節(jié)流 onAction 函數(shù)。
*
* @default 0
*/
throttle?: number;
/**
* 節(jié)流活動事件。如果你在監(jiān)聽鼠標事件，這很有用。有助于減少 CPU 使用率。
*
* @default 200
*/
eventsThrottle?: number;
/**
* 當鉤子掛載時啟動計時器。
*
* @default true
*/
startOnMount?: boolean;
/**
* 要求手動啟動計時器。
*
* @default false
*/
startManually?: boolean;
/**
* 一旦用戶處于空閑狀態(tài)，IdleTimer 將不會在用戶輸入時重置，而是必須手動調用 start() 或 reset() 來重啟計時器。
*
* @default false
*/
stopOnIdle?: boolean;
/**
* 要使用的計時器接口。默認情況下使用主線程計時器以保持模塊可樹搖。如果你想使用工作線程計時器，導入它們并在這里設置。
*
* @default 主線程計時器
*/
timers?: ITimers;
/**
* 啟用跨標簽頁事件復制。
*
* @default false
*/
crossTab?: boolean;
/**
* 此 IdleTimer 實例的名稱。當你啟用 crossTab 并實例化多個 IdleTimer 時非常有用。
*/
name?: string;
/**
* 跨所有標簽頁同步計時器。該值是計時器同步的間隔。將其設置為 0 相當于關閉該功能。
*
* @default 0
*/
syncTimers?: number;
/**
* 啟用領導者功能。領導者選舉將指定一個標簽頁作為領導者。使用 `isLeader` 方法確定一個標簽頁是否是領導者。
*/
leaderElection?: boolean;
/**
* 禁用計時器。禁用計時器會重置內部狀態(tài)。當屬性設置為 true（啟用）時，計時器將重新啟動，尊重 `startManually` 屬性。當計時器被禁用時，控制方法 `start`、`reset`、`activate`、`pause` 和 `resume` 將不會產生任何效果。
*/
disabled?: boolean;
}此外，該 Hook 還提供了很多有用的方法，用于檢測空閑狀態(tài)、計算已過去和剩余的時間、以及在多個標簽頁之間傳播消息等功能。
export interface IIdleTimer {
/**
* 恢復初始狀態(tài)并重啟計時器。
*
* @returns 實例是否已啟動。
*/
start(): boolean;
/**
* 恢復初始狀態(tài)。
*
* @returns 實例是否已重置。
*/
reset(): boolean;
/**
* 恢復初始狀態(tài)，并在用戶被提示或處于空閑狀態(tài)時發(fā)出 onActive 事件。
*
* @returns 實例是否已激活。
*/
activate(): boolean;
/**
* 存儲剩余時間并停止計時器。
*
* @returns 實例是否已暫停。
*/
pause(): boolean;
/**
* 恢復已暫停的計時器。
*
* @returns 實例是否已恢復。
*/
resume(): boolean;
/**
* 向所有 IdleTimer 實例廣播任意消息。
*
* @param data 要發(fā)送到 `onMessage` 回調的數(shù)據(jù)。
* @param emitOnSelf 在調用者實例上發(fā)出事件。
*
* @returns 是否已發(fā)送消息。
*/
message(data: string | number | object, emitOnSelf?: boolean): boolean;
/**
* 返回用戶是否處于空閑狀態(tài)。
*
* @returns 空閑狀態(tài)。
*/
isIdle(): boolean;
/**
* 返回當前標簽頁是否為領導者。
*
* @returns 領導者狀態(tài)。
*/
isLeader(): boolean;
/**
* 返回是否激活了提示。
*
* @returns 提示狀態(tài)。
*/
isPrompted(): boolean;
/**
* 返回這是否是最后一個活動的標簽頁。
*
* @returns 最后活躍狀態(tài)。
*/
isLastActiveTab(): boolean;
/**
* 返回當前標簽頁的 ID。
*/
getTabId(): string;
/**
* 在空閑或提示之前的剩余時間。
*
* @returns 直到空閑或提示的毫秒數(shù)。
*/
getRemainingTime(): number;
/**
* 自上次重置以來經過的時間。
*
* @returns 自上次重置以來的毫秒數(shù)。
*/
getElapsedTime(): number;
/**
* 自掛載以來經過的總時間。
*
* @returns 自掛載以來的毫秒數(shù)。
*/
getTotalElapsedTime(): number;
/**
* 用戶最后一次處于空閑狀態(tài)的時間。
*
* @returns 可以格式化的 Date 對象。
*/
getLastIdleTime(): Date | null;
/**
* 用戶最后一次活躍的時間。
*
* @returns 可以格式化的 Date 對象。
*/
getLastActiveTime(): Date | null;
/**
* 自上次重置以來用戶處于空閑狀態(tài)的時間（以毫秒為單位）。
*
* @returns 用戶處于空閑狀態(tài)的毫秒數(shù)。
*/
getIdleTime(): number;
/**
* 自掛載以來用戶處于空閑狀態(tài)的總時間（以毫秒為單位）。
*
* @returns 用戶處于空閑狀態(tài)的毫秒數(shù)。
*/
getTotalIdleTime(): number;
/**
* 自上次重置以來用戶活躍的總時間（以毫秒為單位）。
*
* @returns 用戶活躍的毫秒數(shù)。
*/
getActiveTime(): number;
/**
* 自掛載以來用戶活躍的總時間（以毫秒為單位）。
*
* @returns 用戶活躍的毫秒數(shù)。
*/
getTotalActiveTime(): number;
}空閑檢測
React Idle Timer的主要功能是空閑檢測。它旨在監(jiān)控用戶活動，重點關注需要跟蹤的事件。它具備了在用戶未在規(guī)定時間范圍內參與這些指定事件時通知應用的能力。
下面來看一個簡單的例子：
import { useEffect, useState } from 'react';
import { useIdleTimer } from 'react-idle-timer';
function App() {
const [state, setState] = useState<string>('Active');
const [eventInfo, setEventInfo] = useState<string>('No event');
const [remaining, setRemaining] = useState<number>(0);
const onIdle = () => {
setState('Idle');
};
const onActive = () => {
setState('Active');
};
const onAction = (event?: Event) => {
if (event) {
setEventInfo(
`事件 ${event.type} 發(fā)生在 ${new Date}`
);
}
};
const { getRemainingTime } = useIdleTimer({
onIdle,
onActive,
onAction,
timeout: 10_000,
throttle: 500,
});
useEffect(() => {
const interval = setInterval(() => {
setRemaining(Math.ceil(getRemainingTime() / 1000));
}, 500);
return () => {
clearInterval(interval);
};
});
return (
<>
<h1>React Idle Timer</h1>
<h2>useIdleTimer</h2>
<p>當前狀態(tài): {state}</p>
<p>{eventInfo}</p>
<p>{remaining} 秒后進入空閑狀態(tài)</p>
</>
);
}
export default App;在這個例子中，通過執(zhí)行 yarn dev 命令，onAction 回調會根據(jù)鼠標移動或鍵盤事件進行更新。每當發(fā)生事件時，會觸發(fā) onActive，有效地重置空閑計時器。如果在 10 秒內沒有任何活動，getRemainingTime 方法將返回 0 的值，隨后會調用 onIdle 回調。
確認提示
一個使用空閑計時器的典型應用是用來識別用戶不活躍的時間，并提示他們確認自己還在使用。這一功能現(xiàn)在已經無縫地集成到 React Idle Timer 的核心特性中。
下面的例子實現(xiàn)了在剩余5秒時彈出確認提示的功能。
import { useEffect, useState } from 'react';
import { useIdleTimer } from 'react-idle-timer';
function App() {
const [state, setState] = useState<string>('Active');
const [eventInfo, setEventInfo] = useState<string>('No event');
const [remaining, setRemaining] = useState<number>(0);
const [prompt, setPrompt] = useState<string>('');
const onIdle = () => {
setState('Idle');
setPrompt('');
};
const onActive = () => {
setState('Active');
setPrompt('');
};
const onAction = (event?: Event) => {
if (event) {
setEventInfo(
`事件 ${event.type} 發(fā)生在 ${new Date}`
);
}
};
const onPrompt = () => {
setPrompt('即將進入空閑狀態(tài)');
}
const { getRemainingTime } = useIdleTimer({
onIdle,
onActive,
onAction,
onPrompt,
timeout: 10_000,
promptBeforeIdle: 5_000,
throttle: 500,
});
useEffect(() => {
const interval = setInterval(() => {
setRemaining(Math.ceil(getRemainingTime() / 1000));
}, 500);
return () => {
clearInterval(interval);
};
});
return (
<>
<h1 style={{color: 'red'}}>{prompt}</h1>
<h1>React Idle Timer</h1>
<h2>useIdleTimer</h2>
<p>當前狀態(tài): {state}</p>
<p>{eventInfo}</p>
<p>{remaining} 秒后進入空閑狀態(tài)</p>
</>
);
}
export default App;在這個例子中，執(zhí)行yarn dev命令后，如果未檢測到用戶活動持續(xù)5秒，將會出現(xiàn)一個確認提示。之后任何用戶活動都會導致該提示消失。然而，如果繼續(xù)不活躍，確認提示將保持可見，直到空閑時間達到10秒。此時，getRemainingTime方法將返回0，觸發(fā)onIdle回調函數(shù)。
跨標簽頁支持
那如果我們同時在多個標簽打開應用，React Idle Timer 還能正常工作嗎？實際上，React Idle Timer 提供了跨標簽頁支持?？鐦撕烅摴δ軐崿F(xiàn)了在應用的多個標簽頁間同步事件和狀態(tài)，進而提升用戶整體的使用體驗。利用這一功能，我們可以向所有標簽頁發(fā)送消息，無論它們當前是處于空閑狀態(tài)還是活躍狀態(tài)，確保信息流的連貫性和一致性。
下面是src/App.tsx文件，它設置了主路由/main，其中包含兩個子路由：/one和/two。如果訪問任何未知路由，用戶將被重定向到登錄頁面。
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { MainPage } from './MainPage';
import { PageOne, PageTwo } from './Pages';
import { Login } from './Login';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/main" element={<MainPage />}>
<Route index element={<div>No page is selected</div>} />
<Route path="one" element={<PageOne />} />
<Route path="two" element={<PageTwo />} />
</Route>
<Route path="*" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;Login.tsx文件定義了一個按鈕，用于導航到/main路由。
import { useNavigate } from 'react-router-dom';
export const Login = () => {
const navigate = useNavigate();
return <button onClick={() => navigate('/main')}>登錄</button>
};src/Main.tsx文件定義了一個指向/one的鏈接，一個指向/two的鏈接，一個<Outlet />組件，以及一個注銷按鈕。
import { Link, Outlet, useNavigate } from 'react-router-dom';
export const MainPage = () => {
const navigate = useNavigate();
return (
<>
<nav>
<ul>
<li>
<Link to="one">Page One</Link>
</li>
<li>
<Link to="two">Page Two</Link>
</li>
</ul>
</nav>
<hr />
<Outlet />
<button style={{marginTop: '20px'}} onClick={() => navigate('/')}>注銷</button>
</>
);
};在這個例子中，執(zhí)行yarn dev命令后，成功登錄將重定向到/main頁面。該頁面提供了指向頁面一和頁面二的鏈接。在瀏覽應用后，點擊注銷按鈕將注銷用戶，使應用返回到登錄前的初始狀態(tài)。
在src/useConfiguredIdleTimer.ts文件中創(chuàng)建了一個名為useConfiguredIdleTimer的自定義 Hook。如果用戶在所有標簽頁/窗口中保持空閑狀態(tài)達10秒，它將導航應用到根路由。
import { useIdleTimer } from 'react-idle-timer';
import { useNavigate } from 'react-router-dom';
export const useConfiguredIdleTimer = () => {
const navigate = useNavigate();
useIdleTimer({
timeout: 10_000,
crossTab: true,
onIdle: () => {
navigate('/');
},
});
};將這個 Hook 將按照以下方式添加到src/Main.tsx文件中：
import { Link, Outlet, useNavigate } from 'react-router-dom';
import { useConfiguredIdleTimer } from './useConfiguredIdleTimer';
export const MainPage = () => {
useConfiguredIdleTimer();
const navigate = useNavigate();
return (
<>
<nav>
<ul>
<li>
<Link to="one">Page One</Link>
</li>
<li>
<Link to="two">Page Two</Link>
</li>
</ul>
</nav>
<hr />
<Outlet />
<button style={{marginTop: '20px'}} onClick={() => navigate('/')}>注銷</button>
</>
);
};在這個例子中，執(zhí)行yarn dev命令后，兩個瀏覽器窗口都已登錄并導航到多個頁面。如果它們保持空閑狀態(tài)達10秒，兩個窗口都會自動注銷。
React Idle Timer 的基本功能到這里就介紹完了，更多功能詳見官方文檔。
- GitHub：https://github.com/SupremeTechnopriest/react-idle-timer。
- 官方文檔：https://idletimer.dev/。
責任編輯：姜華
來源：
前端充電寶
