C7Y28資訊網(wǎng)——每日最新資訊28at.com

空閑注銷登錄是一種重要的安全措施，即用戶在一段時(shí)間內(nèi)無活動(dòng)后自動(dòng)終止其會(huì)話。在涉及敏感信息的場(chǎng)景中，這一功能尤為重要，因?yàn)樗苡行Х乐刮唇?jīng)授權(quán)的訪問和用戶忘記注銷登錄時(shí)可能引發(fā)的濫用，比如很多銀行 App 在五分鐘無活動(dòng)就會(huì)自動(dòng)注銷登錄。C7Y28資訊網(wǎng)——每日最新資訊28at.com

那我們?cè)撊绾螌?shí)現(xiàn)這個(gè)功能呢？今天就來分享一個(gè)很實(shí)用的工具庫——React Idle Timer，幫助你快速實(shí)現(xiàn)空閑注銷登錄！C7Y28資訊網(wǎng)——每日最新資訊28at.com

概念

React Idle Timer 是一個(gè) JavaScript 庫，用于檢測(cè)和監(jiān)控Web應(yīng)用上的用戶活動(dòng)。它提供了一個(gè)IdleTimer組件，可以監(jiān)測(cè)用戶的鼠標(biāo)移動(dòng)、鍵盤輸入和觸摸等事件，以確定用戶是否處于活動(dòng)狀態(tài)。在React應(yīng)用中，可以通過React Idle Timer實(shí)現(xiàn)空閑注銷登錄功能，即在用戶在一段時(shí)間內(nèi)沒有活動(dòng)的情況下，自動(dòng)結(jié)束其會(huì)話，從而提高應(yīng)用的安全性。C7Y28資訊網(wǎng)——每日最新資訊28at.com

空閑注銷登錄的實(shí)現(xiàn)通常需要前端和后端的協(xié)同工作。前端部分通過捕捉用戶活動(dòng)，如鼠標(biāo)移動(dòng)、點(diǎn)擊或鍵盤輸入等事件，來不斷更新用戶的活躍狀態(tài)。一旦這些事件停止發(fā)生，前端會(huì)啟動(dòng)一個(gè)計(jì)時(shí)器，并持續(xù)監(jiān)控用戶是否恢復(fù)活動(dòng)。與此同時(shí)，后端服務(wù)器也在跟蹤用戶的最后活動(dòng)時(shí)間。如果后端在一定時(shí)間內(nèi)沒有收到來自前端的任何新活動(dòng)信號(hào)，并且計(jì)時(shí)器超過了預(yù)設(shè)的閾值，服務(wù)器就會(huì)判定用戶已處于空閑狀態(tài)，并主動(dòng)結(jié)束其會(huì)話。這種前后端結(jié)合的實(shí)現(xiàn)方式，確保了空閑注銷登錄的準(zhǔn)確性和可靠性。即便在前端出現(xiàn)意外情況（如瀏覽器崩潰），后端仍能通過監(jiān)控最后活動(dòng)時(shí)間來保障用戶會(huì)話的安全。而前端部分就可以借助 React Idle Timer 來實(shí)現(xiàn)。C7Y28資訊網(wǎng)——每日最新資訊28at.com

React Idle Timer 的應(yīng)用場(chǎng)景如下：C7Y28資訊網(wǎng)——每日最新資訊28at.com

• 自動(dòng)注銷登錄：在涉及敏感信息的應(yīng)用中，如銀行應(yīng)用、電商網(wǎng)站等，空閑注銷登錄功能尤為重要。React Idle Timer可以監(jiān)測(cè)用戶在一段時(shí)間內(nèi)的活動(dòng)狀態(tài)，如果用戶長時(shí)間沒有交互操作，可以自動(dòng)結(jié)束其會(huì)話，防止未經(jīng)授權(quán)的訪問。
• 顯示閑置提示：當(dāng)用戶在一段時(shí)間內(nèi)沒有進(jìn)行任何操作時(shí)，應(yīng)用可以利用React Idle Timer來觸發(fā)閑置提示的顯示。這可以提醒用戶他們當(dāng)前的會(huì)話仍然處于活躍狀態(tài)，或者提供繼續(xù)操作的指引。
• 保存用戶數(shù)據(jù)：在用戶可能因?yàn)楦鞣N原因暫時(shí)離開應(yīng)用時(shí)，React Idle Timer可以檢測(cè)到用戶的空閑狀態(tài)，并觸發(fā)數(shù)據(jù)保存機(jī)制。這有助于防止用戶數(shù)據(jù)因意外情況而丟失，提高數(shù)據(jù)的安全性。
• 優(yōu)化廣告展示：在廣告展示類的應(yīng)用中，React Idle Timer可以幫助開發(fā)者更精準(zhǔn)地判斷用戶的活躍狀態(tài)，從而調(diào)整廣告的展示策略。例如，在用戶長時(shí)間未進(jìn)行交互時(shí)，可以暫停或調(diào)整廣告的播放，提升用戶體驗(yàn)。
• 提升應(yīng)用性能：通過監(jiān)測(cè)用戶的空閑狀態(tài)，React Idle Timer還可以幫助開發(fā)者優(yōu)化應(yīng)用的性能。例如，在用戶空閑時(shí)，可以降低應(yīng)用的刷新率或暫停某些后臺(tái)進(jìn)程，從而節(jié)省系統(tǒng)資源。

使用

首先，在終端中輸入以下命令來創(chuàng)建一個(gè)基于 Vite 的 React 項(xiàng)目：C7Y28資訊網(wǎng)——每日最新資訊28at.com

yarn create vite vite-idle-timer --template react-tscd vite-idle-timer

然后，通過以下命令來安裝 react-idle-timer：C7Y28資訊網(wǎng)——每日最新資訊28at.com

yarn add react-idle-timer

安裝完成之后就可以在項(xiàng)目中使用 react-idle-timer 了。下面就來看看如何在項(xiàng)目中使用 react-idle-timer。C7Y28資訊網(wǎng)——每日最新資訊28at.com

useIdleTimer

react-idle-timer 中的 useIdleTimer Hook 是用于檢測(cè)用戶是否空閑的主要機(jī)制，即用戶在一定時(shí)間內(nèi)沒有與應(yīng)用進(jìn)行交互。其語法如下：C7Y28資訊網(wǎng)——每日最新資訊28at.com

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

這個(gè) Hook 包含了很多參數(shù)，那咱就來通過 的類型來看看這些參數(shù)都是干嘛用的：C7Y28資訊網(wǎng)——每日最新資訊28at.com

export interface IIdleTimerProps {  /**   * 用于類組件的 IdleTimer 引用。   *   * @default undefined   */  ref?: RefObject<IIdleTimer>;  /**   * 空閑超時(shí)時(shí)間，以毫秒為單位。   *   * @default 1200000（20分鐘）   */  timeout?: number;  /**   * 當(dāng)用戶處于空閑狀態(tài)時(shí)，會(huì)調(diào)用 onPrompt 函數(shù)，并且在達(dá)到提示超時(shí)時(shí)間（以毫秒為單位）后，會(huì)調(diào)用 onIdle 函數(shù)。   *   * @default 0（已棄用，請(qǐng)使用 promptBeforeIdle）   * @deprecated use promptBeforeIdle   */  promptTimeout?: number;  /**   * 在超時(shí)之前的毫秒數(shù)內(nèi)調(diào)用 onPrompt 事件處理程序。   *   * @default 0   */  promptBeforeIdle?: number;  /**   * 綁定活動(dòng)監(jiān)聽器的元素。   *   * @default document   */  element?: Document | HTMLElement;  /**   * 監(jiān)視活動(dòng)事件的 DOM 事件。   *   * @default DefaultEvents   * @link [默認(rèn)事件](https://idletimer.dev/docs/props#events).   */  events?: EventsType[];  /**   * 將繞過超時(shí)并立即觸發(fā) onPrompt/onIdle 事件的 DOM 事件。此數(shù)組中的事件優(yōu)先于 events 數(shù)組中的事件。   *   * @default []   */  immediateEvents?: EventsType[];  /**   * 當(dāng)用戶的在線狀態(tài)發(fā)生變化時(shí)調(diào)用的函數(shù)。   *   * @default () => {}   */  onPresenceChange?: (presence: PresenceType, idleTimer?: IIdleTimer) => void;  /**   * 當(dāng)設(shè)置了 promptTimeout 時(shí)，此函數(shù)在用戶處于空閑狀態(tài)后被調(diào)用。這對(duì)于顯示確認(rèn)提示很有用。如果達(dá)到了提示超時(shí)，隨后會(huì)調(diào)用 onIdle。   *   * @default () => {}   */  onPrompt?: (event?: Event, idleTimer?: IIdleTimer) => void;  /**   * 當(dāng)用戶處于空閑狀態(tài)時(shí)調(diào)用的函數(shù)。   *   * @default () => {}   */  onIdle?: (event?: Event, idleTimer?: IIdleTimer) => void;  /**   * 當(dāng)用戶變得活躍時(shí)調(diào)用的函數(shù)。   *   * @default () => {}   */  onActive?: (event?: Event, idleTimer?: IIdleTimer) => void;  /**   * 在用戶活動(dòng)時(shí)調(diào)用的函數(shù)。可以使用 `throttle` 和 `debounce` 屬性進(jìn)行節(jié)流或防抖。   *   * @default () => {}   */  onAction?: (event?: Event, idleTimer?: IIdleTimer) => void;  /**   * 當(dāng)消息被發(fā)出時(shí)調(diào)用的函數(shù)。   *   * @default () => {}   */  onMessage?: (data: any, idleTimer?: IIdleTimer) => void;  /**   * 通過設(shè)置延遲（以毫秒為單位）來防抖 onAction 函數(shù)。   *   * @default 0   */  debounce?: number;  /**   * 通過設(shè)置延遲（以毫秒為單位）來節(jié)流 onAction 函數(shù)。   *   * @default 0   */  throttle?: number;  /**   * 節(jié)流活動(dòng)事件。如果你在監(jiān)聽鼠標(biāo)事件，這很有用。有助于減少 CPU 使用率。   *   * @default 200   */  eventsThrottle?: number;  /**   * 當(dāng)鉤子掛載時(shí)啟動(dòng)計(jì)時(shí)器。   *   * @default true   */  startOnMount?: boolean;  /**   * 要求手動(dòng)啟動(dòng)計(jì)時(shí)器。   *   * @default false   */  startManually?: boolean;  /**   * 一旦用戶處于空閑狀態(tài)，IdleTimer 將不會(huì)在用戶輸入時(shí)重置，而是必須手動(dòng)調(diào)用 start() 或 reset() 來重啟計(jì)時(shí)器。   *   * @default false   */  stopOnIdle?: boolean;  /**   * 要使用的計(jì)時(shí)器接口。默認(rèn)情況下使用主線程計(jì)時(shí)器以保持模塊可樹搖。如果你想使用工作線程計(jì)時(shí)器，導(dǎo)入它們并在這里設(shè)置。   *   * @default 主線程計(jì)時(shí)器   */  timers?: ITimers;  /**   * 啟用跨標(biāo)簽頁事件復(fù)制。   *   * @default false   */  crossTab?: boolean;  /**   * 此 IdleTimer 實(shí)例的名稱。當(dāng)你啟用 crossTab 并實(shí)例化多個(gè) IdleTimer 時(shí)非常有用。   */  name?: string;  /**   * 跨所有標(biāo)簽頁同步計(jì)時(shí)器。該值是計(jì)時(shí)器同步的間隔。將其設(shè)置為 0 相當(dāng)于關(guān)閉該功能。   *   * @default 0   */  syncTimers?: number;  /**   * 啟用領(lǐng)導(dǎo)者功能。領(lǐng)導(dǎo)者選舉將指定一個(gè)標(biāo)簽頁作為領(lǐng)導(dǎo)者。使用 `isLeader` 方法確定一個(gè)標(biāo)簽頁是否是領(lǐng)導(dǎo)者。   */  leaderElection?: boolean;  /**   * 禁用計(jì)時(shí)器。禁用計(jì)時(shí)器會(huì)重置內(nèi)部狀態(tài)。當(dāng)屬性設(shè)置為 true（啟用）時(shí)，計(jì)時(shí)器將重新啟動(dòng)，尊重 `startManually` 屬性。當(dāng)計(jì)時(shí)器被禁用時(shí)，控制方法 `start`、`reset`、`activate`、`pause` 和 `resume` 將不會(huì)產(chǎn)生任何效果。   */  disabled?: boolean;}

此外，該 Hook 還提供了很多有用的方法，用于檢測(cè)空閑狀態(tài)、計(jì)算已過去和剩余的時(shí)間、以及在多個(gè)標(biāo)簽頁之間傳播消息等功能。C7Y28資訊網(wǎng)——每日最新資訊28at.com

export interface IIdleTimer {  /**   * 恢復(fù)初始狀態(tài)并重啟計(jì)時(shí)器。   *   * @returns 實(shí)例是否已啟動(dòng)。   */  start(): boolean;  /**   * 恢復(fù)初始狀態(tài)。   *   * @returns 實(shí)例是否已重置。   */  reset(): boolean;  /**   * 恢復(fù)初始狀態(tài)，并在用戶被提示或處于空閑狀態(tài)時(shí)發(fā)出 onActive 事件。   *   * @returns 實(shí)例是否已激活。   */  activate(): boolean;  /**   * 存儲(chǔ)剩余時(shí)間并停止計(jì)時(shí)器。   *   * @returns 實(shí)例是否已暫停。   */  pause(): boolean;  /**   * 恢復(fù)已暫停的計(jì)時(shí)器。   *   * @returns 實(shí)例是否已恢復(fù)。   */  resume(): boolean;  /**   * 向所有 IdleTimer 實(shí)例廣播任意消息。   *   * @param data  要發(fā)送到 `onMessage` 回調(diào)的數(shù)據(jù)。   * @param emitOnSelf  在調(diào)用者實(shí)例上發(fā)出事件。   *   * @returns 是否已發(fā)送消息。   */  message(data: string | number | object, emitOnSelf?: boolean): boolean;  /**   * 返回用戶是否處于空閑狀態(tài)。   *   * @returns 空閑狀態(tài)。   */  isIdle(): boolean;  /**   * 返回當(dāng)前標(biāo)簽頁是否為領(lǐng)導(dǎo)者。   *   * @returns 領(lǐng)導(dǎo)者狀態(tài)。   */  isLeader(): boolean;  /**   * 返回是否激活了提示。   *   * @returns 提示狀態(tài)。   */  isPrompted(): boolean;  /**   * 返回這是否是最后一個(gè)活動(dòng)的標(biāo)簽頁。   *   * @returns 最后活躍狀態(tài)。   */  isLastActiveTab(): boolean;  /**   * 返回當(dāng)前標(biāo)簽頁的 ID。   */  getTabId(): string;  /**   * 在空閑或提示之前的剩余時(shí)間。   *   * @returns 直到空閑或提示的毫秒數(shù)。   */  getRemainingTime(): number;  /**   * 自上次重置以來經(jīng)過的時(shí)間。   *   * @returns 自上次重置以來的毫秒數(shù)。   */  getElapsedTime(): number;  /**   * 自掛載以來經(jīng)過的總時(shí)間。   *   * @returns 自掛載以來的毫秒數(shù)。   */  getTotalElapsedTime(): number;  /**   * 用戶最后一次處于空閑狀態(tài)的時(shí)間。   *   * @returns 可以格式化的 Date 對(duì)象。   */  getLastIdleTime(): Date | null;  /**   * 用戶最后一次活躍的時(shí)間。   *   * @returns 可以格式化的 Date 對(duì)象。   */  getLastActiveTime(): Date | null;  /**   * 自上次重置以來用戶處于空閑狀態(tài)的時(shí)間（以毫秒為單位）。   *   * @returns 用戶處于空閑狀態(tài)的毫秒數(shù)。   */  getIdleTime(): number;  /**   * 自掛載以來用戶處于空閑狀態(tài)的總時(shí)間（以毫秒為單位）。   *   * @returns 用戶處于空閑狀態(tài)的毫秒數(shù)。   */  getTotalIdleTime(): number;  /**   * 自上次重置以來用戶活躍的總時(shí)間（以毫秒為單位）。   *   * @returns 用戶活躍的毫秒數(shù)。   */  getActiveTime(): number;  /**   * 自掛載以來用戶活躍的總時(shí)間（以毫秒為單位）。   *   * @returns 用戶活躍的毫秒數(shù)。   */  getTotalActiveTime(): number;}

空閑檢測(cè)

React Idle Timer的主要功能是空閑檢測(cè)。它旨在監(jiān)控用戶活動(dòng)，重點(diǎn)關(guān)注需要跟蹤的事件。它具備了在用戶未在規(guī)定時(shí)間范圍內(nèi)參與這些指定事件時(shí)通知應(yīng)用的能力。C7Y28資訊網(wǎng)——每日最新資訊28at.com

下面來看一個(gè)簡單的例子：C7Y28資訊網(wǎng)——每日最新資訊28at.com

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>當(dāng)前狀態(tài): {state}</p>      <p>{eventInfo}</p>      <p>{remaining} 秒后進(jìn)入空閑狀態(tài)</p>    </>  );}export default App;

在這個(gè)例子中，通過執(zhí)行 yarn dev 命令，onAction 回調(diào)會(huì)根據(jù)鼠標(biāo)移動(dòng)或鍵盤事件進(jìn)行更新。每當(dāng)發(fā)生事件時(shí)，會(huì)觸發(fā) onActive，有效地重置空閑計(jì)時(shí)器。如果在 10 秒內(nèi)沒有任何活動(dòng)，getRemainingTime 方法將返回 0 的值，隨后會(huì)調(diào)用 onIdle 回調(diào)。C7Y28資訊網(wǎng)——每日最新資訊28at.com

確認(rèn)提示

一個(gè)使用空閑計(jì)時(shí)器的典型應(yīng)用是用來識(shí)別用戶不活躍的時(shí)間，并提示他們確認(rèn)自己還在使用。這一功能現(xiàn)在已經(jīng)無縫地集成到 React Idle Timer 的核心特性中。C7Y28資訊網(wǎng)——每日最新資訊28at.com

下面的例子實(shí)現(xiàn)了在剩余5秒時(shí)彈出確認(rèn)提示的功能。C7Y28資訊網(wǎng)——每日最新資訊28at.com

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('即將進(jìn)入空閑狀態(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>當(dāng)前狀態(tài): {state}</p>      <p>{eventInfo}</p>      <p>{remaining} 秒后進(jìn)入空閑狀態(tài)</p>    </>  );}export default App;

在這個(gè)例子中，執(zhí)行yarn dev命令后，如果未檢測(cè)到用戶活動(dòng)持續(xù)5秒，將會(huì)出現(xiàn)一個(gè)確認(rèn)提示。之后任何用戶活動(dòng)都會(huì)導(dǎo)致該提示消失。然而，如果繼續(xù)不活躍，確認(rèn)提示將保持可見，直到空閑時(shí)間達(dá)到10秒。此時(shí)，getRemainingTime方法將返回0，觸發(fā)onIdle回調(diào)函數(shù)。C7Y28資訊網(wǎng)——每日最新資訊28at.com

跨標(biāo)簽頁支持

那如果我們同時(shí)在多個(gè)標(biāo)簽打開應(yīng)用，React Idle Timer 還能正常工作嗎？實(shí)際上，React Idle Timer 提供了跨標(biāo)簽頁支持。跨標(biāo)簽頁功能實(shí)現(xiàn)了在應(yīng)用的多個(gè)標(biāo)簽頁間同步事件和狀態(tài)，進(jìn)而提升用戶整體的使用體驗(yàn)。利用這一功能，我們可以向所有標(biāo)簽頁發(fā)送消息，無論它們當(dāng)前是處于空閑狀態(tài)還是活躍狀態(tài)，確保信息流的連貫性和一致性。C7Y28資訊網(wǎng)——每日最新資訊28at.com

下面是src/App.tsx文件，它設(shè)置了主路由/main，其中包含兩個(gè)子路由：/one和/two。如果訪問任何未知路由，用戶將被重定向到登錄頁面。C7Y28資訊網(wǎng)——每日最新資訊28at.com

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文件定義了一個(gè)按鈕，用于導(dǎo)航到/main路由。C7Y28資訊網(wǎng)——每日最新資訊28at.com

import { useNavigate } from 'react-router-dom';export const Login = () => {  const navigate = useNavigate();  return <button onClick={() => navigate('/main')}>登錄</button>};

src/Main.tsx文件定義了一個(gè)指向/one的鏈接，一個(gè)指向/two的鏈接，一個(gè)<Outlet />組件，以及一個(gè)注銷按鈕。C7Y28資訊網(wǎng)——每日最新資訊28at.com

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

在這個(gè)例子中，執(zhí)行yarn dev命令后，成功登錄將重定向到/main頁面。該頁面提供了指向頁面一和頁面二的鏈接。在瀏覽應(yīng)用后，點(diǎn)擊注銷按鈕將注銷用戶，使應(yīng)用返回到登錄前的初始狀態(tài)。C7Y28資訊網(wǎng)——每日最新資訊28at.com

在src/useConfiguredIdleTimer.ts文件中創(chuàng)建了一個(gè)名為useConfiguredIdleTimer的自定義 Hook。如果用戶在所有標(biāo)簽頁/窗口中保持空閑狀態(tài)達(dá)10秒，它將導(dǎo)航應(yīng)用到根路由。C7Y28資訊網(wǎng)——每日最新資訊28at.com

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

將這個(gè) Hook 將按照以下方式添加到src/Main.tsx文件中：C7Y28資訊網(wǎng)——每日最新資訊28at.com

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

在這個(gè)例子中，執(zhí)行yarn dev命令后，兩個(gè)瀏覽器窗口都已登錄并導(dǎo)航到多個(gè)頁面。如果它們保持空閑狀態(tài)達(dá)10秒，兩個(gè)窗口都會(huì)自動(dòng)注銷。C7Y28資訊網(wǎng)——每日最新資訊28at.com

React Idle Timer 的基本功能到這里就介紹完了，更多功能詳見官方文檔。C7Y28資訊網(wǎng)——每日最新資訊28at.com

• GitHub：https://github.com/SupremeTechnopriest/react-idle-timer。
• 官方文檔：https://idletimer.dev/。

本文鏈接：http://www.www897cc.com/showinfo-26-84039-0.html前端實(shí)現(xiàn)空閑時(shí)注銷登錄，so easy！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 燒腦預(yù)警，這波心智負(fù)擔(dān)有點(diǎn)重，深度探討 useState 的實(shí)現(xiàn)原理

下一篇： 電子書下載 | 利用 OpenUSD 和 NVIDlA Omniverse? 開啟物理精確模擬世界 AI 新時(shí)代