Angular+Node.js+MySQL登录后如何通过Cookie显示用户名

你的代码存在几个关键问题导致用户名显示undefined，下面逐一说明并给出修复代码：

1. Node.js 后端问题 #

• 异步逻辑错误：res.cookie被放在了数据库查询的异步回调外面，会在查询完成前就执行，且无论登录成功/失败都会设置Cookie
• SQL注入风险：直接拼接字符串生成SQL语句，存在安全隐患
• 响应顺序错误：res.cookie应该在res.send之前调用，否则Cookie不会被正确设置

修改后的Node.js登录接口代码： #

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    // 使用参数化查询避免SQL注入
    const query = 'SELECT * FROM user WHERE username = ? AND password = ?';
  
    db.query(query, [username, password], (error, result) => {
      if (error) {
        console.log('Error querying database:', error);
        return res.status(500).send('Error querying database');
      } 
      if (result.length === 0) {
        console.log('Invalid username or password');
        return res.status(401).send('Invalid username or password');
      } 
      // 登录成功后才设置Cookie，且先设置再返回响应
      console.log('Login successful');
      res.cookie('username', username, { 
        httpOnly: false, // 若需前端读取则设为false，生产环境建议设为true配合后端渲染
        maxAge: 24 * 60 * 60 * 1000 // Cookie有效期1天
      });
      res.status(200).send({
        message: 'Login successful',
        username: username
      });
    });
});

2. Angular 前端问题 #

• Cookie设置错误：你用未赋值的this.Username去设置Cookie，导致Cookie值为undefined
• 用户名赋值逻辑错误：cookieService.set方法不会返回Cookie值，不能直接赋值给this.Username

修改后的login.component.ts代码： #

loginSubmit(){
    console.log(this.userLogin.value);
    this.service.LoginData(this.userLogin.value).subscribe((res) => {
        console.log(res);
        this.userLogin.reset();
        this.successmsg = res.message;
        // 从接口响应中获取用户名并设置Cookie
        this.cookieService.set('username', res.username);
        // 从Cookie中读取用户名并赋值用于显示
        this.Username = this.cookieService.get('username');
    }, (err) => {
        // 处理登录失败的情况
        console.error(err);
        this.successmsg = '';
    });
}

修复说明 #

• 后端仅在登录成功时设置Cookie，确保Cookie值的准确性
• 前端从接口返回的响应中获取用户名，再存入Cookie并读取显示
• 替换SQL拼接为参数化查询，消除注入风险

内容的提问来源于stack exchange，提问作者Jay Mervana