JavaScript前端数据过滤：根据用户ID显示特定内容及后端优化建议-小浪学习网

JavaScript前端数据过滤：根据用户ID显示特定内容及后端优化建议

本文详细介绍了如何在前端使用JavaScript根据用户ID过滤并显示数据库中的特定数据行，例如个性化职位列表。我们将通过示例代码演示客户端实现方法，并重点强调了这种做法潜在的安全风险和性能问题，强烈建议采用后端过滤机制以确保数据安全和系统效率。

客户端数据过滤的实现

在某些场景下，我们可能需要从服务器获取全部数据后，在客户端根据当前用户的id进行筛选，只显示与该用户相关的数据。以下我们将演示如何在接收到json数据后，使用javascript在构建html表格行之前进行条件判断。

假设我们通过$.getJSON获取了一组职位列表数据，其中每条记录都包含一个createdByUserID字段，表示创建该职位的用户ID。我们的目标是只显示那些createdByUserID与当前登录用户ID匹配的职位。

首先，我们需要获取当前登录用户的ID。在实际应用中，这个ID通常从用户会话、认证令牌或页面上的特定元素（如示例中的zuojiankuohaophpcndiv data-ms-member=”id”></div>）中安全地获取。为了演示，我们假设已将当前用户ID存储在一个变量currentUserUID中。

$(function() {     var records = [];     // 假设这是当前登录用户的ID，实际应用中应从安全途径获取     var currentUserUID = "your_logged_in_user_id"; // 例如: 从后端API、sessionStorage/localStorage获取，或从特定DOM元素中提取      $.getjson('https://db-ommitted-for-privacy?tableName=JobListings&fields=company,logo,img,companyDescription,role,roleDescription,location,link,createdByUserID,dateAdded&view=AllListings', function(data) {         $.each(data.records, function parseJSON(i, { fields: f }) {             // 在构建表格行之前，进行用户ID匹配判断             if (currentUserUID !== f.createdByUserID) {                 return true; // 如果不匹配，则跳过当前记录，继续处理下一条             }              // 如果匹配，则继续构建并显示表格行             var tblRow = "<tr>" +                 "<td>" +                     "<div style='padding-top: 1%; padding-bottom: 1%;'>" +                         "<div style='border: 1px solid black;'>" +                             "<button class='accordionList' style='font-size: large; outline: none;'>" +                                 "<span style='padding-top: 2.5%; padding-bottom: 3%;'>" +                                     "<img src='" + f.logo + "' height='30px'>" +                                 "</span>  <span style='padding-top: 3%; padding-bottom: 3%;'>   " +                                     f.company + "   |   " + f.role +                                 "    <span style='color: #2b2b2b;''><span class='iconify-inline' data-icon='eva:pin-outline' style='color: #2b2b2b;'></span> " + f.location +"</span></span>" +                             "</button>" +                             "<div class='panel'>" +                                 "<img src='img/jobBanner2.png' width='100%'>" +                                 "<br>" +                                 "<p style='color: #505050;'>Posted: " + f.dateCreated + "   |   Status: " + f.status + "</p>" +                                 "<h4>About this role:</h4>" +                                 "<p>" + f.roleDescription + "</p>" +                                 "<h4>About " + f.company + ":</h4>" +                                 "<p>" + f.companyDescription + "</p>" + "<br>" +                                 "<a href='pricing.html' class='button btn btn-lg btn-block btn-sm button-black' style='padding-top: 1%; padding-bottom: 1%; width: 200px;'>Apply   <span class='iconify-inline' data-icon='bi:arrow-right-circle' data-width='15' style='color: white;'></span></a>" +                                 "<br>" + "</div>" +                             "</div>" +                         "</div>" +                     "</div>" +                 "</td>" +             "</tr>";             $(tblRow).appendTo("#userdata tbody");         });     }); });

代码解析：

var currentUserUID = “your_logged_in_user_id”;: 此行声明了一个变量来存储当前登录用户的ID。在实际部署时，您需要用获取真实用户ID的逻辑替换 “your_logged_in_user_id”。例如，如果使用 <div data-ms-member=”id”></div> 这样的方式，您可能需要通过JavaScript读取其内容：var currentUserUID = $(‘[data-ms-member=”id”]’).text();。
if (currentUserUID !== f.createdByUserID) { return true; }: 这是核心的过滤逻辑。在$.each循环遍历每一条数据记录时，会执行此判断。
- f.createdByUserID：表示当前正在处理的这条职位记录的创建者用户ID。
- currentUserUID：表示当前登录用户的ID。
- 如果两者不相等，return true; 会跳过当前循环迭代中剩余的代码，直接进入下一条记录的处理，从而阻止不匹配的数据被渲染到页面上。

潜在问题与最佳实践

尽管客户端过滤可以快速实现功能，但它存在严重的安全和性能隐患，尤其不适用于生产环境或涉及敏感数据的场景。

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

1. 安全风险

当您在前端进行数据过滤时，意味着服务器将所有数据（包括那些不应该向当前用户显示的数据）都发送到了客户端。恶意用户可以通过浏览器的开发者工具（如网络面板、控制台）轻松查看原始的JSON响应，从而获取到所有数据库记录，即便这些记录在页面上被过滤掉了。这可能导致敏感信息泄露，构成严重的安全漏洞。

示例： 假设一个用户只应看到自己发布的职位。如果所有职位数据都发送到前端，恶意用户可以通过开发者工具查看网络请求，获取到其他用户发布的职位详情，这显然是不可接受的。

Fliki

高效帮用户创建视频，具有文本转语音功能

查看详情

2. 性能问题

从服务器获取大量不必要的数据会增加网络传输的负担，尤其是在数据量庞大或用户网络状况不佳时。即使客户端最终只显示少量数据，但传输、解析和处理全部数据的过程仍然会消耗大量资源，导致页面加载缓慢，用户体验下降。

3. 最佳实践：后端数据过滤

为了解决上述问题，强烈建议在后端（服务器端）进行数据过滤。这意味着在数据库查询阶段就只检索与当前用户相关的数据，然后将过滤后的结果发送给前端。

实现方式：

API设计： 您的后端API应该能够接收用户ID作为参数（或从用户会话中自动识别），并在数据库查询中加入相应的WHERE子句。例如，如果使用sql数据库，查询可能类似于：
```
SELECT * FROM JobListings WHERE createdByUserID = [当前用户ID];
```
后端语言： 使用php、node.js、python (Django/flask)、Java (spring) 等任何后端语言都可以实现这种逻辑。后端负责验证用户身份，获取其ID，然后构建并执行安全的数据库查询，最后将过滤后的数据以JSON格式返回给前端。