偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

前端實現(xiàn)空閑時注銷登錄,so easy!

開發(fā) 前端
React Idle Timer 是一個 JavaScript 庫,用于檢測和監(jiān)控Web應(yīng)用上的用戶活動。它提供了一個IdleTimer組件,可以監(jiān)測用戶的鼠標移動、鍵盤輸入和觸摸等事件,以確定用戶是否處于活動狀態(tài)。在React應(yīng)用中,可以通過React Idle Timer實現(xiàn)空閑注銷登錄功能,即在用戶在一段時間內(nèi)沒有活動的情況下,自動結(jié)束其會話,從而提高應(yīng)用的安全性。

空閑注銷登錄是一種重要的安全措施,即用戶在一段時間內(nèi)無活動后自動終止其會話。在涉及敏感信息的場景中,這一功能尤為重要,因為它能有效防止未經(jīng)授權(quán)的訪問和用戶忘記注銷登錄時可能引發(fā)的濫用,比如很多銀行 App 在五分鐘無活動就會自動注銷登錄。

那我們該如何實現(xiàn)這個功能呢?今天就來分享一個很實用的工具庫——React Idle Timer,幫助你快速實現(xiàn)空閑注銷登錄!

概念

React Idle Timer 是一個 JavaScript 庫,用于檢測和監(jiān)控Web應(yīng)用上的用戶活動。它提供了一個IdleTimer組件,可以監(jiān)測用戶的鼠標移動、鍵盤輸入和觸摸等事件,以確定用戶是否處于活動狀態(tài)。在React應(yīng)用中,可以通過React Idle Timer實現(xiàn)空閑注銷登錄功能,即在用戶在一段時間內(nèi)沒有活動的情況下,自動結(jié)束其會話,從而提高應(yīng)用的安全性。

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

React Idle Timer 的應(yīng)用場景如下:

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

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)時,會調(diào)用 onPrompt 函數(shù),并且在達到提示超時時間(以毫秒為單位)后,會調(diào)用 onIdle 函數(shù)。
   *
   * @default 0(已棄用,請使用 promptBeforeIdle)
   * @deprecated use promptBeforeIdle
   */
  promptTimeout?: number;
  /**
   * 在超時之前的毫秒數(shù)內(nèi)調(diào)用 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ā)生變化時調(diào)用的函數(shù)。
   *
   * @default () => {}
   */
  onPresenceChange?: (presence: PresenceType, idleTimer?: IIdleTimer) => void;
  /**
   * 當設(shè)置了 promptTimeout 時,此函數(shù)在用戶處于空閑狀態(tài)后被調(diào)用。這對于顯示確認提示很有用。如果達到了提示超時,隨后會調(diào)用 onIdle。
   *
   * @default () => {}
   */
  onPrompt?: (event?: Event, idleTimer?: IIdleTimer) => void;
  /**
   * 當用戶處于空閑狀態(tài)時調(diào)用的函數(shù)。
   *
   * @default () => {}
   */
  onIdle?: (event?: Event, idleTimer?: IIdleTimer) => void;
  /**
   * 當用戶變得活躍時調(diào)用的函數(shù)。
   *
   * @default () => {}
   */
  onActive?: (event?: Event, idleTimer?: IIdleTimer) => void;
  /**
   * 在用戶活動時調(diào)用的函數(shù)??梢允褂?`throttle` 和 `debounce` 屬性進行節(jié)流或防抖。
   *
   * @default () => {}
   */
  onAction?: (event?: Event, idleTimer?: IIdleTimer) => void;
  /**
   * 當消息被發(fā)出時調(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é)流活動事件。如果你在監(jiān)聽鼠標事件,這很有用。有助于減少 CPU 使用率。
   *
   * @default 200
   */
  eventsThrottle?: number;
  /**
   * 當鉤子掛載時啟動計時器。
   *
   * @default true
   */
  startOnMount?: boolean;
  /**
   * 要求手動啟動計時器。
   *
   * @default false
   */
  startManually?: boolean;
  /**
   * 一旦用戶處于空閑狀態(tài),IdleTimer 將不會在用戶輸入時重置,而是必須手動調(diào)用 start() 或 reset() 來重啟計時器。
   *
   * @default false
   */
  stopOnIdle?: boolean;
  /**
   * 要使用的計時器接口。默認情況下使用主線程計時器以保持模塊可樹搖。如果你想使用工作線程計時器,導(dǎo)入它們并在這里設(shè)置。
   *
   * @default 主線程計時器
   */
  timers?: ITimers;
  /**
   * 啟用跨標簽頁事件復(fù)制。
   *
   * @default false
   */
  crossTab?: boolean;
  /**
   * 此 IdleTimer 實例的名稱。當你啟用 crossTab 并實例化多個 IdleTimer 時非常有用。
   */
  name?: string;
  /**
   * 跨所有標簽頁同步計時器。該值是計時器同步的間隔。將其設(shè)置為 0 相當于關(guān)閉該功能。
   *
   * @default 0
   */
  syncTimers?: number;
  /**
   * 啟用領(lǐng)導(dǎo)者功能。領(lǐng)導(dǎo)者選舉將指定一個標簽頁作為領(lǐng)導(dǎo)者。使用 `isLeader` 方法確定一個標簽頁是否是領(lǐng)導(dǎo)者。
   */
  leaderElection?: boolean;
  /**
   * 禁用計時器。禁用計時器會重置內(nèi)部狀態(tài)。當屬性設(shè)置為 true(啟用)時,計時器將重新啟動,尊重 `startManually` 屬性。當計時器被禁用時,控制方法 `start`、`reset`、`activate`、`pause` 和 `resume` 將不會產(chǎn)生任何效果。
   */
  disabled?: boolean;
}

此外,該 Hook 還提供了很多有用的方法,用于檢測空閑狀態(tài)、計算已過去和剩余的時間、以及在多個標簽頁之間傳播消息等功能。

export interface IIdleTimer {
  /**
   * 恢復(fù)初始狀態(tài)并重啟計時器。
   *
   * @returns 實例是否已啟動。
   */
  start(): boolean;
  /**
   * 恢復(fù)初始狀態(tài)。
   *
   * @returns 實例是否已重置。
   */
  reset(): boolean;
  /**
   * 恢復(fù)初始狀態(tài),并在用戶被提示或處于空閑狀態(tài)時發(fā)出 onActive 事件。
   *
   * @returns 實例是否已激活。
   */
  activate(): boolean;
  /**
   * 存儲剩余時間并停止計時器。
   *
   * @returns 實例是否已暫停。
   */
  pause(): boolean;
  /**
   * 恢復(fù)已暫停的計時器。
   *
   * @returns 實例是否已恢復(fù)。
   */
  resume(): boolean;
  /**
   * 向所有 IdleTimer 實例廣播任意消息。
   *
   * @param data  要發(fā)送到 `onMessage` 回調(diào)的數(shù)據(jù)。
   * @param emitOnSelf  在調(diào)用者實例上發(fā)出事件。
   *
   * @returns 是否已發(fā)送消息。
   */
  message(data: string | number | object, emitOnSelf?: boolean): boolean;
  /**
   * 返回用戶是否處于空閑狀態(tài)。
   *
   * @returns 空閑狀態(tài)。
   */
  isIdle(): boolean;
  /**
   * 返回當前標簽頁是否為領(lǐng)導(dǎo)者。
   *
   * @returns 領(lǐng)導(dǎo)者狀態(tài)。
   */
  isLeader(): boolean;
  /**
   * 返回是否激活了提示。
   *
   * @returns 提示狀態(tài)。
   */
  isPrompted(): boolean;
  /**
   * 返回這是否是最后一個活動的標簽頁。
   *
   * @returns 最后活躍狀態(tài)。
   */
  isLastActiveTab(): boolean;
  /**
   * 返回當前標簽頁的 ID。
   */
  getTabId(): string;
  /**
   * 在空閑或提示之前的剩余時間。
   *
   * @returns 直到空閑或提示的毫秒數(shù)。
   */
  getRemainingTime(): number;
  /**
   * 自上次重置以來經(jīng)過的時間。
   *
   * @returns 自上次重置以來的毫秒數(shù)。
   */
  getElapsedTime(): number;
  /**
   * 自掛載以來經(jīng)過的總時間。
   *
   * @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ān)注需要跟蹤的事件。它具備了在用戶未在規(guī)定時間范圍內(nèi)參與這些指定事件時通知應(yīng)用的能力。

下面來看一個簡單的例子:

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 回調(diào)會根據(jù)鼠標移動或鍵盤事件進行更新。每當發(fā)生事件時,會觸發(fā) onActive,有效地重置空閑計時器。如果在 10 秒內(nèi)沒有任何活動,getRemainingTime 方法將返回 0 的值,隨后會調(diào)用 onIdle 回調(diào)。

確認提示

一個使用空閑計時器的典型應(yīng)用是用來識別用戶不活躍的時間,并提示他們確認自己還在使用。這一功能現(xiàn)在已經(jīng)無縫地集成到 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)一個確認提示。之后任何用戶活動都會導(dǎo)致該提示消失。然而,如果繼續(xù)不活躍,確認提示將保持可見,直到空閑時間達到10秒。此時,getRemainingTime方法將返回0,觸發(fā)onIdle回調(diào)函數(shù)。

跨標簽頁支持

那如果我們同時在多個標簽打開應(yīng)用,React Idle Timer 還能正常工作嗎?實際上,React Idle Timer 提供了跨標簽頁支持??鐦撕烅摴δ軐崿F(xiàn)了在應(yīng)用的多個標簽頁間同步事件和狀態(tài),進而提升用戶整體的使用體驗。利用這一功能,我們可以向所有標簽頁發(fā)送消息,無論它們當前是處于空閑狀態(tài)還是活躍狀態(tài),確保信息流的連貫性和一致性。

下面是src/App.tsx文件,它設(shè)置了主路由/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文件定義了一個按鈕,用于導(dǎo)航到/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頁面。該頁面提供了指向頁面一和頁面二的鏈接。在瀏覽應(yīng)用后,點擊注銷按鈕將注銷用戶,使應(yīng)用返回到登錄前的初始狀態(tài)。

在src/useConfiguredIdleTimer.ts文件中創(chuàng)建了一個名為useConfiguredIdleTimer的自定義 Hook。如果用戶在所有標簽頁/窗口中保持空閑狀態(tài)達10秒,它將導(dǎo)航應(yīng)用到根路由。

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命令后,兩個瀏覽器窗口都已登錄并導(dǎo)航到多個頁面。如果它們保持空閑狀態(tài)達10秒,兩個窗口都會自動注銷。

React Idle Timer 的基本功能到這里就介紹完了,更多功能詳見官方文檔。

  • GitHub:https://github.com/SupremeTechnopriest/react-idle-timer。
  • 官方文檔:https://idletimer.dev/。
責任編輯:姜華 來源: 前端充電寶
相關(guān)推薦

2021-03-11 07:27:17

CPU空閑代碼

2022-11-26 00:00:02

2018-02-02 08:55:47

LinuxCPU

2012-09-07 09:41:15

Win 8關(guān)機

2018-09-05 21:07:06

數(shù)據(jù)管理

2023-04-03 15:04:00

RPCPHP語言

2019-03-26 11:36:28

網(wǎng)絡(luò)

2019-12-23 10:51:40

Python車票搶票

2022-07-27 08:49:34

接口加密解密

2021-04-23 10:38:52

Spring BootSpringMVC源碼

2012-05-18 14:24:57

fedora 17安裝卸載

2022-05-06 10:42:09

JavaFlowable引擎

2020-04-13 14:00:07

量子計算圍棋AI

2014-09-18 10:27:53

U-Mail郵件系統(tǒng)郵件服務(wù)器

2020-12-10 08:21:27

XML映射Mybatis

2020-08-12 18:11:02

戴爾

2021-03-03 08:02:13

JavaScript函數(shù)字節(jié)

2022-07-11 10:37:41

MapPart集合

2010-03-11 13:41:01

無線路由器自動斷線

2015-10-23 15:00:30

數(shù)據(jù)中心求職
點贊
收藏

51CTO技術(shù)棧公眾號