本文旨在探讨如何在前端JavaScript中实现用户专属数据的显示过滤，确保仅展示由当前用户创建的数据库记录。同时，文章将深入分析前端过滤存在的安全与性能隐患，并强烈推荐采用后端过滤作为更安全、高效的解决方案，以保障数据安全并优化应用性能。
客户端数据过滤的实现
在许多web应用中，我们常常需要根据当前登录用户的身份，仅显示与该用户相关的数据。例如，在一个职位发布平台，用户可能只想查看自己发布的职位列表。当数据从后端获取后，我们可以在前端利用javascript进行初步的过滤。
假设我们通过$.getJSON从一个API接口获取了所有职位列表数据，并且每条职位数据中包含一个createdByUserID字段，标识该职位是由哪个用户创建的。同时，我们能够获取到当前登录用户的ID。
获取当前用户ID
通常，当前登录用户的ID可以通过多种方式获取，例如：
- 从HTML元素的data属性中读取（如 zuojiankuohaophpcndiv data-ms-member=”id”></div>）。
- 从JavaScript全局变量中获取。
- 通过Cookie或LocalStorage存储。
假设我们已经获取到了当前用户的ID，并将其存储在一个变量uid中。
在数据循环中添加过滤逻辑
在遍历从API获取的数据记录时，我们可以在构建HTML行的逻辑之前，加入一个简单的条件判断。如果记录的createdByUserID与当前用户的uid不匹配，则跳过当前记录，不将其添加到页面中。
立即学习“前端免费学习笔记（深入）”；
以下是修改后的JavaScript代码示例：
$(function() { // 假设您已经通过某种方式获取了当前登录用户的ID // 例如：var uid = $('[data-ms-member="id"]').text(); // 从HTML元素中获取 // 或者从其他全局变量、Cookie、LocalStorage获取 var uid = "YOUR_CURRENT_USER_ID"; // 请替换为实际获取用户ID的逻辑 $.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 }) { // 在构建表格行之前添加过滤逻辑 if (uid != 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"); }); }); });
在上述代码中，if (uid != f.createdByUserID) { return true; } 这一行是关键。它在每次迭代时检查当前记录的创建者ID是否与登录用户ID匹配。如果不匹配，return true;会立即结束当前迭代，跳过后续的HTML构建和追加操作，从而实现过滤。
注意事项与最佳实践
尽管前端过滤可以快速实现功能需求，但它存在严重的安全和性能问题，在生产环境中应尽量避免。
1. 安全风险
问题： 您的API接口直接返回了数据库中的所有数据（或大部分数据），而过滤操作是在用户浏览器中进行的。这意味着，即使页面上只显示了用户自己的数据，通过浏览器的开发者工具，任何用户都可以检查网络请求，看到并访问到所有未经过滤的原始数据，包括其他用户创建的敏感信息。
后果： 这种做法相当于将您的整个数据库暴露给了客户端，存在严重的数据泄露风险。恶意用户可以轻易获取到不属于他们的数据，导致隐私泄露、数据篡改等问题。
2. 性能问题
问题： 即使只显示一小部分数据，您的应用也需要从服务器下载整个数据集。随着数据量的增长，这将导致：
- 网络带宽浪费： 传输大量不必要的数据。
- 客户端处理负担： 浏览器需要下载、解析并遍历大量JSON数据，即使大部分数据最终被过滤掉。
- 响应时间延长： 用户需要等待所有数据传输和处理完毕才能看到最终结果。
后果： 页面加载速度变慢，用户体验下降，尤其是在移动设备或网络状况不佳的环境下。
3. 后端过滤：推荐的解决方案
为了彻底解决上述安全和性能问题，强烈建议将数据过滤逻辑放在后端（服务器端）实现。
工作原理：
- 用户认证： 当用户登录时，后端会验证其身份并获取其用户ID。
- API请求带参数： 当前端需要获取用户专属数据时，不再请求所有数据，而是向后端API发送一个带有当前用户ID的请求。例如： GET /api/JobListings?createdByUserID=YOUR_USER_ID
- 后端处理： 后端服务（例如使用PHP、Node.js、Python等语言）接收到请求后，会利用这个用户ID在数据库层面直接进行查询过滤。数据库只返回与该用户ID匹配的记录。
- 前端接收： 前端接收到的API响应中，就已经是经过过滤的、仅属于当前用户的数据。
后端过滤的优势：
- 安全性： 敏感数据永远不会离开服务器，只将用户被授权查看的数据发送到前端。这是防止数据泄露最根本的保障。
- 性能： 只传输必要的数据量，大大减少了网络负载和客户端的处理负担，从而提高页面加载速度和应用响应性。
- 可扩展性： 随着数据量的增长，后端数据库和服务器能够更高效地处理过滤请求。
示例（概念性）： 如果您的API支持，您应该尝试修改API请求，直接在服务器端进行过滤：
// 假设您的API支持通过参数过滤 var uid = "YOUR_CURRENT_USER_ID"; // 替换为实际获取用户ID的逻辑 $.getJSON('https://db-ommitted-for-privacy?tableName=JobListings&fields=company,logo,img,companyDescription,role,roleDescription,location,link,createdByUserID,dateAdded&view=AllListings&createdByUserID=' + uid, function(data) { // 此时data.records中已经只包含当前用户创建的记录 $.each(data.records, function parseJSON(i, { fields: f }) { var tblRow = "<tr>" + // ... 构建HTML行，无需再进行前端过滤 ... "</tr>"; $(tblRow).appendTo("#userdata tbody"); }); });
如果API不支持直接通过createdByUserID参数过滤，您需要与后端开发人员协作，修改或创建新的API接口来实现服务器端过滤。
总结
在前端实现用户专属数据过滤虽然操作简单，但其潜在的安全风险和性能问题不容忽视。对于任何涉及用户敏感数据或大量数据的应用，将数据过滤逻辑迁移到后端是最佳实践。这不仅能有效保护数据安全，还能显著提升应用性能和用户体验。前端应专注于数据的展示和交互，而数据的获取、验证和过滤则应交由后端处理。
以上就是php javascript python java html js 前端 node.js json node go Python php JavaScript json html if Cookie 全局变量 循环 接口 JS 数据库 后端安全