Express.js 登出路由无法重定向问题排查与修复

在提供的示例代码中，客户端的JavaScript代码如下：

logout.addEventListener('click', () => { 
    axios.post('/logout')
      .then(() => { })
      .catch((err) => { console.log(err) }) 
});

这段代码仅仅发送了一个POST请求到/logout，然后对then和catch的回调函数中并没有做任何处理，导致浏览器忽略了服务器返回的响应，因此无法实现重定向。

解决方案一：服务器端重定向 + 客户端处理

此方案的核心在于服务器端返回重定向响应，客户端JavaScript检测到重定向后，手动修改window.location。

服务器端代码（Express.js）：

app.post('/logout', (req, res) => {
  console.log("am clicked");
  if (req.session) {
    req.session.destroy((err) => {
      if (err) {
        console.error("Error destroying session:", err);
        return res.status(500).send("Logout failed"); // 建议返回错误信息
      }
      console.log('have been clicked');
      return res.redirect('/'); // 重定向到首页
    });
    return; // 确保在session销毁后不再执行后续代码
  }
  return res.redirect('/'); // 如果没有session，直接重定向
});

客户端代码（JavaScript）：

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

logout.addEventListener('click', () => { 
    axios.post('/logout')
      .then(response => {
          if (response.status >= 300 && response.status < 400) { // 检查是否为重定向状态码
              window.location.href = response.request.responseURL; // 获取重定向URL
          } else {
              // 处理其他情况，例如成功登出但没有重定向
              window.location.href = "/"; // 默认跳转到首页
          }
      })
      .catch((err) => { 
         console.error(err);
         // 提示用户登出失败
         alert("Logout failed. Please try again.");
      });
});

注意事项：

• 确保在req.session.destroy()中处理错误，并向客户端返回合适的错误信息。
• 使用res.redirect()进行重定向，并确保客户端能够正确解析重定向状态码和URL。
• response.request.responseURL 获取重定向后的URL地址，兼容不同版本的axios

解决方案二：完全客户端处理

此方案将重定向逻辑完全放在客户端，服务器端仅负责清除会话。

服务器端代码（Express.js）：

app.post('/logout', (req, res) => {
  console.log("am clicked");
  if (req.session) {
    req.session.destroy((err) => {
      if (err) {
        console.error("Error destroying session:", err);
        return res.status(500).send("Logout failed"); // 建议返回错误信息
      }
      console.log('have been clicked');
      return res.status(200).send({message: "Logout successful"}); // 返回成功信息
    });
    return; // 确保在session销毁后不再执行后续代码
  }
  return res.status(200).send({message: "Logout successful"}); // 如果没有session，也返回成功信息
});

客户端代码（JavaScript）：

logout.addEventListener('click', () => { 
    axios.post('/logout')
      .then(response => {
          if (response.status === 200) {
              // 登出成功，跳转到首页
              window.location.href = "/";
          } else {
              // 处理其他情况，例如登出失败
              alert("Logout failed. Please try again.");
          }
      })
      .catch((err) => { 
         console.error(err);
         // 提示用户登出失败
         alert("Logout failed. Please try again.");
      });
});

注意事项：

• 服务器端返回一个成功状态码（例如200）和一个包含成功信息的JSON对象。
• 客户端根据服务器返回的状态码和信息，决定是否跳转到首页。
• 这种方案更加清晰，客户端和服务器端的职责更加明确。

总结

当使用Ajax请求处理登出时，需要特别注意客户端和服务器端之间的交互。服务器端的res.render()或res.redirect()不会自动影响客户端的浏览器行为。需要通过客户端JavaScript代码来显式处理服务器返回的响应，从而实现重定向或其他操作。选择哪种解决方案取决于具体的需求和项目架构，但理解Ajax请求的本质是解决此类问题的关键。