Vanilla JavaScript 登入狀態監視器-js教程-PHP中文網

介紹

在 Web 開發領域，JavaScript 仍是基石技術。雖然框架和函式庫可以簡化開發，但掌握 Vanilla JavaScript 為理解語言的複雜性奠定了堅實的基礎。作為最佳實踐，我建議開發人員，尤其是剛進入該領域的開發人員，在探索框架之前，重點磨練他們的Vanilla JavaScript技能。

追蹤使用者登入狀態的重要性
有效管理使用者登入狀態對於確保網路應用程式的安全性、效率和整體使用者體驗至關重要。實施使用者登入追蹤的好處包括：

第一部
增強的安全性：透過要求使用者在獲得存取權限之前登入來防止未經授權的存取敏感資料。最佳化資源利用：透過在本地儲存資料並僅在發生變更時更新來最大程度地減少對伺服器的不必要請求。

資料完整性：透過控制修改、新增和刪除來確保資料一致性。
改進的用戶體驗：利用時間戳自動註銷不活動的用戶，增強安全性並簡化用戶體驗。
無縫伺服器互動：在客戶端和伺服器之間建立強大的通訊通道，實現高效的資料交換和同步。

透過實施精心設計的使用者登入追蹤系統，開發人員可以顯著提高其 Web 應用程式的安全性、效能和整體品質。

第二部：

現在讓我們深入研究程式碼：

首先，讓變數存取設備本地儲存：
const storage = window.localStorage;

其次，我們將建立一個具有初始/預設資料值的變數。
每當新資料到達或更改時，相同的資料值都會更新。

這是變數：

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

登入後複製

第三部分：

現在讓我們建立一個函數來將資料儲存到裝置本地儲存：

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) {
  // ...
}

登入後複製

這是一個reducer函數，它是Redux等狀態管理函式庫中的關鍵概念。減速器有兩個參數：

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.

登入後複製

切換語句
JavaScript

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

登入後複製

此 switch 語句檢查操作物件的 type 屬性並執行對應的程式碼區塊。
登入案例

Vanilla JavaScript Login Status Monitor
JavaScript

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

登入後複製

當action.type為「LOGIN」時，reducer：

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」時，reducer：

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

登入後複製

預設情況
JavaScript

預設：
返回狀態；

如果action.type與上述任何情況都不匹配，則reducer只是傳回目前狀態而不做任何變更。
總之，這個reducer函數透過回應「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 接受兩個參數：

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 取得使用者資料。 wait 關鍵字確保程式碼在繼續之前等待 Promise 解析。
呼叫Reducer

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.

登入後複製

reducer 傳回一個新的狀態對象，該物件被指派給狀態變數。
更新狀態屬性

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

登入後複製

這些行更新狀態物件的兩個屬性：

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();

登入後複製

如您所見，我們的程式碼能夠在使用者登出時刪除資料。我們也可以利用時間戳在使用者長時間不活動或關閉網站標籤時自動登出。

有關 dom 操作的完整程式碼，請造訪 github 連結：

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

以上是Vanilla JavaScript 登入狀態監視器的詳細內容。更多資訊請關注PHP中文網其他相關文章！