Vanilla JavaScript 登录状态监视器

介绍

在本文中，我们将探索如何使用 vanilla javascript 构建简单的登录状态监视器。我们将介绍用户登录状态管理的基础知识，包括本地存储用户数据以及处理登录和注销操作。读完本文后，您将深入了解如何使用 vanilla javascript 实现登录状态监视器。

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

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

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

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

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

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

1. 第二部分：

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

立即学习“Java免费学习笔记（深入）”；

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

case "login":
  cacheuserdata(action.payload);
  return {
    userdata: action.payload,
    timestamp: date.now(),
    isloggedin: true
  };

登录后复制

当action.type为“login”时，reducer：

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.

登录后复制

注销案例
javascript

case "logout":
  storage.removeitem('exampleuserdata');
  return {
    userdata: null,
    timestamp: null,
    isloggedin: false
  };

登录后复制

当action.type为“logout”时，reducer：

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

默认：
返回状态；

如果action.type与上述任何情况都不匹配，则reducer只是返回当前状态而不做任何更改。
总之，这个reducer函数通过响应“login”和“logout”动作来管理用户登录状态。

最后但并非最不重要的一点是，以下是将用作正确数据输出的函数。
重要提示：我们本来应该向此函数添加导出，以便它可以在其他文件中使用，但因为这里它在单个文件中，所以我们不必这样做。您可以访问下面的 github 链接，查看具有相同功能的更大项目。

用户数据管理功能
在本节中，我们将探讨 userdata.js 函数，它在管理用户数据方面发挥着至关重要的作用。
userdata 函数代码
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;
};

登录后复制

代码分解
我们来一步步剖析userdata函数：
函数签名
javascript

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

登录后复制

这个异步函数 userdata 接受两个参数：

type: a string indicating the type of action (e.g., "login" or "logout").

登录后复制

获取用户数据
javascript

const userdata = await fetchuserdata();

登录后复制

该行使用 fetchuserdata 函数从指定的 urllink 获取用户数据。 wait 关键字确保代码在继续之前等待 promise 解析。
调用reducer

javascript：

const state = myreducer(undefined, { type: type, payload: userdata });

登录后复制

这一行调用 myreducer 函数，传递：

undefined as the initial state.
an object with two properties:
    type: the type argument passed to the userdata function.
    payload: the fetched user data.

登录后复制

reducer 返回一个新的状态对象，该对象被分配给状态变量。
更新状态属性

javascript：

state.timestamp = state.timestamp;
state.isloggedin = state.isloggedin;

登录后复制

这些行更新状态对象的两个属性：

timestamp: set to the value of timestamp.
isloggedin: set to its own value.

登录后复制

恢复状态
javascript

返回状态；

最后，函数返回更新后的状态对象。
示例输出
当我们使用不同的操作调用 userdata 函数时，我们得到以下输出：
登录数据：
json

{
  "userdata": {
    "name": "trevor",
    "surname": "mudau",
    "contact": "076 335 8888",
    "email": "example@email.com",
    "password": "12345"
  },
  "timestamp": 1733057702748,
  "isloggedin": true,
  "timestamp": 1733057702748
}

登录后复制

注销数据：
json

{
  "userData": null,
  "timestamp": null,
  "isLoggedIn": false,
  "timeStamp": null
}

登录后复制

如您所见，我们的代码能够在用户注销时删除数据。我们还可以利用时间戳在用户长时间不活动或关闭网站选项卡时自动注销。

有关 dom 操作的完整代码，请访问 github 链接：

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

以上就是Vanilla JavaScript 登录状态监视器的详细内容，更多请关注慧达安全导航其它相关文章！