React+Node+Express项目：管理员登录查询双表全量数据方案

步骤1：数据库调整（可选但推荐） #

给user表添加role字段，用于区分普通用户与管理员，扩展性更强：

ALTER TABLE user ADD COLUMN role VARCHAR(20) DEFAULT 'user';

将管理员账号admin@admin.com的角色设置为admin：

UPDATE user SET role = 'admin' WHERE email = 'admin@admin.com';

若不想修改表结构，也可直接通过邮箱判断身份，但角色字段更便于后续扩展权限。

步骤2：修改后端接口（修复SQL注入+权限判断） #

原代码存在SQL注入风险，先改为参数化查询，再加入权限逻辑：

app.get("/registration", (req, res) => {
  const currentUser = req.session.email[0];
  let sqlSelect, params;

  // 判断当前用户是否为管理员
  if (currentUser.role === 'admin' || currentUser.email === 'admin@admin.com') {
    // 管理员查询所有数据，新增SubmittedBy字段标记提交用户
    sqlSelect = `SELECT mahalkita.CompanyName, mahalkita.Address, mahalkita.PhoneNumber, mahalkita.PresidentName, mahalkita.AccountManagerEmail, mahalkita.AccountManagerPhone, 
    mahalkita.PICEmail, mahalkita.PICPhone, mahalkita.EstablishedDate, mahalkita.MainBusiness, mahalkita.EmployeeNumber, mahalkita.NumberOfCustomer, mahalkita.Attachments, 
    mahalkita.id, mahalkita.SKAny, mahalkita.SKValid, mahalkita.NPWPAny, mahalkita.NPWPValid, mahalkita.SIUPAny, mahalkita.SIUPValid, mahalkita.TDPAny, mahalkita.TDPValid,
    mahalkita.DomisiliAny, mahalkita.DomisiliValid, mahalkita.SPKPAny, mahalkita.SPKPValid, mahalkita.AuditAny, mahalkita.AuditValid, mahalkita.TaxAny, mahalkita.TaxValid, 
    mahalkita.BankAny, mahalkita.BankValid, mahalkita.Created_At, mahalkita.Updated_At, mahalkita.Status, mahalkita.Submitted, user.email AS SubmittedBy
    from mahalkita INNER JOIN user ON mahalkita.email = user.email ORDER BY mahalkita.id DESC`;
    params = [];
  } else {
    // 普通用户仅查询自身数据
    sqlSelect = `SELECT mahalkita.CompanyName, mahalkita.Address, mahalkita.PhoneNumber, mahalkita.PresidentName, mahalkita.AccountManagerEmail, mahalkita.AccountManagerPhone, 
    mahalkita.PICEmail, mahalkita.PICPhone, mahalkita.EstablishedDate, mahalkita.MainBusiness, mahalkita.EmployeeNumber, mahalkita.NumberOfCustomer, mahalkita.Attachments, 
    mahalkita.id, mahalkita.SKAny, mahalkita.SKValid, mahalkita.NPWPAny, mahalkita.NPWPValid, mahalkita.SIUPAny, mahalkita.SIUPValid, mahalkita.TDPAny, mahalkita.TDPValid,
    mahalkita.DomisiliAny, mahalkita.DomisiliValid, mahalkita.SPKPAny, mahalkita.SPKPValid, mahalkita.AuditAny, mahalkita.AuditValid, mahalkita.TaxAny, mahalkita.TaxValid, 
    mahalkita.BankAny, mahalkita.BankValid, mahalkita.Created_At, mahalkita.Updated_At, mahalkita.Status, mahalkita.Submitted
    from mahalkita INNER JOIN user ON mahalkita.email = user.email WHERE user.email = ? ORDER BY mahalkita.id DESC`;
    params = [currentUser.email];
  }

  db.query(sqlSelect, params, (err, result) => {
    if (err) {
      console.error(err);
      return res.status(500).send("Error fetching data");
    }
    res.send(result);
  });
});

核心修改： #

• 用参数化查询?替代字符串拼接，彻底避免SQL注入
• 管理员查询时新增SubmittedBy字段，返回提交数据的用户邮箱
• 根据用户角色/邮箱动态切换查询逻辑，实现权限隔离

步骤3：前端页面调整（管理员专属显示） #

在主页表格中新增「提交用户」列，仅管理员可见，修改homepage.js相关代码：

// 新增状态变量标记是否为管理员
const [isAdmin, setIsAdmin] = useState(false);

// 拉取数据时判断当前用户身份（假设登录时用户信息已存在sessionStorage）
const getData = () => {
  Axios.get(`http://localhost:3001/registration`).then((response) => {
    setDataList(response.data);
    const currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
    setIsAdmin(currentUser.role === 'admin' || currentUser.email === 'admin@admin.com');
  });
};

// 修改表格表头，动态添加「提交用户」列
<thead>
  <tr>
    <th scope="col">ID</th>
    {isAdmin && <th scope="col">Submitted By</th>}
    <th scope="col">Created</th>
    <th scope="col">Updated</th>
    <th scope="col">Action</th>
  </tr>
</thead>

// 修改表格内容行，显示提交用户邮箱（仅管理员可见）
<tr key={index}>
  <td>{val.id}</td>
  {isAdmin && <td>{val.SubmittedBy}</td>}
  <td>{moment(val.Created_At).format('MMMM Do YYYY, h:mm:ss a')}</td>
  <td>{moment(val.Updated_At).format('MMMM Do YYYY, h:mm:ss a')}</td>
  {/* 原有Action列代码保持不变 */}
</tr>

核心修改： #

• 动态渲染管理员专属列，避免普通用户看到无关信息
• 展示后端返回的SubmittedBy字段，让管理员清晰区分数据归属

额外注意事项 #

1. 登录逻辑补充：登录成功后需将用户角色/邮箱存入前端存储（如sessionStorage），方便后续权限判断
2. 操作权限校验：若需要限制管理员专属操作（如删除所有数据），需同步修改删除等接口的权限判断逻辑
3. 全局权限拦截：可在路由层面添加拦截，确保未授权用户无法访问管理员专属功能

内容的提问来源于stack exchange，提问作者RAHMAN DHIKA