Vanilla JavaScript 登录状态监视器

介绍

在 Web 开发领域，JavaScript 仍然是基石技术。虽然框架和库可以简化开发，但掌握 Vanilla JavaScript 为理解该语言的复杂性奠定了坚实的基础。作为最佳实践，我建议开发人员，尤其是刚进入该领域的开发人员，在探索框架之前，重点磨练他们的Vanilla JavaScript技能。

跟踪用户登录状态的重要性
有效管理用户登录状态对于确保Web应用程序的安全性、效率和整体用户体验至关重要。实施用户登录跟踪的好处包括：

1. 第一部分
2. 增强的安全性：通过要求用户在获得访问权限之前登录来防止未经授权的访问敏感数据。 优化资源利用：通过在本地存储数据并仅在发生更改时更新来最大程度地减少对服务器的不必要请求。

• 数据完整性：通过控制修改、添加和删除来确保数据一致性。
  改进的用户体验：利用时间戳自动注销不活动的用户，增强安全性并简化用户体验。

• 无缝服务器交互：在客户端和服务器之间建立强大的通信通道，实现高效的数据交换和同步。

通过实施精心设计的用户登录跟踪系统，开发人员可以显着提高其 Web 应用程序的安全性、性能和整体质量。

1. 第二部分：

现在让我们深入研究代码：

首先，让变量访问设备本地存储：
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) {
  // ...
}

这是一个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 属性并执行相应的代码块。
登录案例

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中文网其他相关文章！