Vanilla JavaScript ログイン ステータス モニター

導入

Web 開発の分野では、JavaScript は依然として基礎となるテクノロジーです。フレームワークとライブラリは開発を簡素化できますが、Vanilla JavaScript をマスターすることは言語の複雑さを理解するための強固な基盤となります。ベスト プラクティスとして、開発者、特にこの分野の初心者には、フレームワークを検討する前にバニラ JavaScript スキルを磨くことに重点を置くことをお勧めします。

ユーザーのログインステータスを追跡することの重要性
ユーザーのログイン ステータスを効果的に管理することは、Web アプリケーションのセキュリティ、効率性、全体的なユーザー エクスペリエンスを確保するために非常に重要です。ユーザー ログイン追跡を実装する利点は次のとおりです。

1. 前編
2. セキュリティの強化: アクセスする前にユーザーにログインを要求することで、機密データへの不正アクセスを防ぎます。 リソース利用の最適化: データをローカルに保存し、変更が発生した場合にのみ更新することで、サーバーへの不必要なリクエストを最小限に抑えます。

• データの整合性: 変更、追加、削除を制御することでデータの一貫性を確保します。
  ユーザー エクスペリエンスの向上: タイムスタンプを利用して非アクティブなユーザーを自動的にログアウトし、セキュリティを強化し、ユーザー エクスペリエンスを合理化します。

• シームレスなサーバー操作: クライアントとサーバーの間に堅牢な通信チャネルを確立し、効率的なデータ交換と同期を可能にします。

適切に設計されたユーザー ログイン追跡システムを実装することで、開発者は Web アプリケーションのセキュリティ、パフォーマンス、全体的な品質を大幅に向上させることができます。

1. 第 2 部:

それでは、コードの詳細を見てみましょう:

まず、変数がデバイスのローカル ストレージにアクセスできるようにします。
const storage = window.localStorage;

次に、初期/デフォルト データの値を持つ変数を作成します。
新しいデータが到着または変更されるたびに、同じデータ値が更新されます。

変数は次のとおりです:

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

1. 第三部:

次に、デバイスのローカル ストレージにデータを保存する関数を作成しましょう:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

次に、コードの主要部分である
を作成しましょう。 これが私たちのリデューサー関数です。

この関数は、デバイスのローカル ストレージへの挿入、更新、削除によるデータの制御を担当します。

コードは次のとおりです:

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

このコードを段階的に分解してみましょう:
関数のシグネチャ
JavaScript

function myReducer(state = initialState, action) {
  // ...
}

これはリデューサー関数であり、Redux のような状態管理ライブラリの重要な概念です。リデューサーは 2 つの引数を取ります:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

Switch ステートメント
JavaScript

switch (action.type) {
  // ...
}

この switch ステートメントは、アクション オブジェクトの type プロパティをチェックし、対応するコード ブロックを実行します。
ログインケース

JavaScript

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

action.type が「LOGIN」の場合、リデューサーは次のようになります。

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

ログアウトケース
JavaScript

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

action.type が「LOGOUT」の場合、リデューサーは次のようになります。

function myReducer(state = initialState, action) {
  // ...
}

デフォルトのケース
JavaScript

デフォルト:
状態を返す;

action.type が上記のいずれのケースにも一致しない場合、リデューサーは変更を加えずに単に現在の状態を返します。
要約すると、このリデューサー関数は、「LOGIN」および「LOGOUT」アクションに応答することでユーザーのログイン状態を管理します。

最後に重要なことですが、以下は正しいデータの出力として使用される関数です。
重要: 他のファイルで使用できるように、この関数にエクスポートを追加する必要がありましたが、ここでは単一のファイル内にあるため、その必要はありません。以下の github リンクにアクセスすると、同じ機能を持つより大きなプロジェクトを確認できます。

ユーザーデータ管理機能
このセクションでは、ユーザー データの管理において重要な役割を果たす userData.js 関数について説明します。
userData 関数コード
JavaScript:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

コードの内訳
userData 関数を段階的に分析してみましょう:
関数のシグネチャ
JavaScript

switch (action.type) {
  // ...
}

この非同期関数 userData は 2 つのパラメータを受け入れます:

case "LOGIN":
  cacheUserData(action.payload);
  return {
    userData: action.payload,
    timestamp: Date.now(),
    isLoggedIn: true
  };

ユーザーデータの取得
JavaScript

Calls the cacheUserData function with the action.payload (which contains the user data).
Returns a new state object with the following properties:
    userData: The user data from the action.payload.
    timestamp: The current timestamp.
    isLoggedIn: Set to true.

この行は、fetchUserData 関数を使用して、指定された urlLink からユーザー データを取得します。 await キーワードを使用すると、コードは続行する前に Promise が解決されるまで待機します。
レデューサーを呼び出す

JavaScript:

case "LOGOUT":
  storage.removeItem('exampleUserData');
  return {
    userData: null,
    timestamp: null,
    isLoggedIn: false
  };

この行は myReducer 関数を呼び出し、以下を渡します:

Removes/dete the user data from storage using storage.removeItem.
Returns a new state object with the following properties:
    userData: Set to null.
    timestamp: Set to null.
    isLoggedIn: Set to false.

リデューサーは、状態変数に割り当てられる新しい状態オブジェクトを返します。
状態プロパティを更新しています

JavaScript:

const userData = async (type) => {

    const userData = await myUserData;
    const state = myReducer(undefined, { type: type, payload: userData });

    state.timeStamp = state.timestamp;
    state.isLoggedIn = state.isLoggedIn;

    return state;
};

これらの行は、状態オブジェクトの 2 つのプロパティを更新します。

const userData = async (type) => {
  // ...
}

状態を返す
JavaScript

状態を返す;

最後に、関数は更新された状態オブジェクトを返します。
出力例
さまざまなアクションで userData 関数を呼び出すと、次の出力が得られます:
ログインデータ:
JSON

urlLink: A URL link used to fetch user data.
type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").

ログアウトデータ:
JSON

const userData = await fetchUserData();

ご覧のとおり、私たちのコードはユーザーがログアウトするときにデータを削除できます。また、タイムスタンプを利用して、長期間非アクティブな状態が続いた場合、または Web サイトのタブが閉じられた場合に、ユーザーを自動的にログアウトすることもできます。

DOM 操作を含む完全なコードについては、github リンクにアクセスしてください:

https://github.com/TrevoDng/logig-status-monitor-frontend

以上がVanilla JavaScript ログイン ステータス モニターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。