如何移除connect-flash消息？解决注销按钮无响应及页面跳转问题

需求与现状 #

点击注销按钮时移除登录后显示的connect-flash用户名消息，当前点击注销仅刷新页面无反应，希望停留在当前页面不跳转，询问是否需要将注销按钮类型改为submit。

现有代码 #

HTML代码 #

<body>
    <p id="after"><%= username %></p>
    <div class="login">
      <h1>Login</h1>
      <form action="/" method="post">
        <label for="username">
          <!-- font awesome icon -->
          <i class="fas fa-user"></i>
        </label>
        <input type="text" name="username" placeholder="Username" required />
        <label for="password">
          <i class="fas fa-lock"></i>
        </label>
        <input
          type="password"
          name="password"
          placeholder="Password"
          id="password"
          required
        />
        <input type="submit" value="Login" />
        <button id="logout" name="logout" type="button">Logout</button>
      </form>
</body>

Node.js后端代码 #

app.get("/", function (req, res) {
  const username = req.flash("user");
  res.render("login", { username });
});

app.post("/", function (request, response) {
  // Capture the input fields
  let username = request.body.username;
  let password = request.body.password;
  // Ensure the input fields exists and are not empty
  if (username && password) {
    // Execute SQL query that'll select the account from the database based on the specified username and password
    connection.query(
      "SELECT * FROM accounts WHERE username = ? AND password = ?",
      [username, password],
      function (error, results, fields, name) {
        // If there is an issue with the query, output the error
        if (error) throw error;
        // If the account exists
        if (results.length > 0) {
          request.session.loggedin = true;
          request.session.username = username;
          request.flash("user", request.body.username);
          response.redirect("/");
        } else {
          response.send("Incorrect Username and/or Password!");
        }
        response.end();
      }
    );
  } else {
    response.send("Please enter Username and Password!");
    response.end();
  }
    //try to logout
  app.get("/", async (request, response) => {
    if (request.flash.username) {
      delete request.flash.username;
      response.json({ result: "SUCCESS" });
    } else {
      response.json({ result: "ERROR", message: "baba" });
    }
  });
});

app.listen(port);
console.log(`Server is listening on port ${port}`);

问题分析与解决方案 #

核心问题 #

1. 注销路由被嵌套在POST /路由内部，永远不会被触发，Node.js路由按顺序匹配，外层GET /已处理请求，嵌套路由无效。
2. 注销按钮是type="button"但未绑定点击事件，点击后无任何动作。
3. 注销逻辑错误：req.flash是方法而非对象，不能通过delete request.flash.username清除，且未销毁登录会话。
4. 若改为submit类型，会提交表单导致页面跳转，不符合“停留在当前页面”的需求。

解决步骤 #

1. 调整后端路由，添加独立的注销接口

将嵌套的注销路由移出，单独创建GET /logout接口，负责销毁会话、清除flash消息：

// 原GET /路由保留
app.get("/", function (req, res) {
  const username = req.flash("user");
  res.render("login", { username });
});

// 原POST /登录路由保留，移除内部的注销路由
app.post("/", function (request, response) {
  // ... 原有登录逻辑不变
});

// 添加独立的注销接口
app.get("/logout", function(req, res) {
  // 销毁登录会话
  req.session.destroy(function(err) {
    if (err) throw err;
    // 清除flash的user消息
    req.flash("user", "");
    // 返回JSON响应，告知前端注销成功
    res.json({ success: true });
  });
});

2. 前端添加注销按钮的点击事件，实现无刷新更新页面

在HTML页面末尾添加脚本，绑定注销按钮的点击事件，通过AJAX请求注销接口，成功后更新页面元素：

<script>
document.getElementById('logout').addEventListener('click', async function() {
  try {
    const response = await fetch('/logout');
    const data = await response.json();
    if (data.success) {
      // 清空显示用户名的p标签
      document.getElementById('after').textContent = '';
      // 可选：重置表单或调整其他UI
    }
  } catch (err) {
    console.error('注销失败:', err);
  }
});
</script>

3. 按钮类型无需修改

保持注销按钮的type="button"即可，避免触发表单提交导致页面跳转，通过JS事件实现无刷新操作。

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