React项目提交表单到SQL数据库后如何仅展示当前用户信息？

修改方案 #

第一步：修正服务端路由注册问题 #

你当前的服务端代码存在逻辑错误：/login GET接口、/add POST接口、/teachersdata GET接口、/logout GET接口的定义都嵌套在了/login POST接口的回调函数内，只有用户调用一次登录接口之后这些路由才会注册，需要把这些接口定义移到/login POST接口外部。

第二步：修改查询用户数据的接口，增加登录用户过滤 #

将原有的/teachersdata接口逻辑替换为如下代码，利用session中存储的当前登录用户邮箱，仅返回该用户填写的表单记录：

app.get("/teachersdata", (req, res) => {
  // 校验登录状态
  if(!req.session.user){
    return res.status(401).json({message: "用户未登录"})
  }
  // 获取当前登录用户的邮箱
  const userEmail = req.session.user[0].email
  // 增加WHERE条件过滤数据
  db.query("SELECT * FROM teacher WHERE email = ?", [userEmail], (err, result) => {
    if (err) {
      console.log(err);
      return res.status(500).json(err)
    }
    res.send(result);
  });
});

第三步：优化前端表单提交跳转逻辑（可选） #

你当前的表单提交逻辑是发起POST请求后立刻跳转页面，可能出现数据还没写入数据库就跳转查询的情况，建议把跳转逻辑放到请求成功回调内：

const handlesubmit = () => {
  axios.post("http://localhost:3001/add",{
    firstname:firstname,
    lastname:lastname,
    email:email,
    mobile:mobile,
    address:address,
    city:city,
    pincode:pincode,
    conference:conference,
    seminar:seminar,
    paper:paper
  }).then((res)=>{
    console.log("数据提交成功");
    history.push("/view")
  })
};

额外安全建议 #

你当前的注册、登录接口中存在SQL注入风险，所有SQL查询都建议使用参数化查询的写法，不要直接拼接用户输入的内容到SQL语句中，例如原注册接口的查询代码：

// 风险写法
db.query("SELECT  FROM registration WHERE email='"+email+"';", [email], (err, result) => {

替换为参数化写法：

// 安全写法
db.query("SELECT * FROM registration WHERE email = ?", [email], (err, result) => {

内容的提问来源于stack exchange，提问作者Jaydeep Mengwal