动态加载内容的Bootstrap Modal重定向问题：登录页显示异常

方法一：通过响应的最终URL判断重定向到登录页 #

利用jQuery AJAX的完整回调获取响应对象，检查请求最终跳转的URL是否为登录页。如果是，直接刷新主页面：

$.get("/edit-item?id=" + $(this).data("id"))
  .done(function(data, textStatus, jqXHR) {
    // 兼容不同浏览器获取最终响应URL
    var finalUrl = jqXHR.responseURL || jqXHR.getResponseHeader('X-Final-URL');
    if (finalUrl && finalUrl.includes('/login')) {
      parent.location.reload();
      return;
    }
    $("#modal-edit-item").find(".modal-body").html(data);
  });

注：如果部分旧浏览器不支持responseURL，可以在后端重定向时添加自定义响应头X-Final-URL，值为登录页地址，前端通过getResponseHeader获取。

方法二：后端返回特定状态码（推荐） #

这是最规范的方案，后端在用户未登录时不直接重定向，而是返回401 Unauthorized状态码，前端根据状态码处理：

后端调整示例（以Node.js/Express为例） #

app.get('/edit-item', (req, res) => {
  if (!req.user) {
    // 返回401状态码，不重定向
    return res.sendStatus(401);
  }
  // 已登录，返回编辑页面内容
  res.render('edit-item');
});

前端代码 #

$.get("/edit-item?id=" + $(this).data("id"))
  .done(function(data) {
    $("#modal-edit-item").find(".modal-body").html(data);
  })
  .fail(function(jqXHR) {
    if (jqXHR.status === 401) {
      parent.location.reload();
    }
  });

这种方式逻辑清晰，符合HTTP语义，避免前端猜测内容的尴尬。

方法三：检测响应内容特征（兜底方案） #

如果后端无法修改重定向逻辑，可以临时通过检测返回内容里的登录页特征（比如特定ID的元素）来判断：

$.get("/edit-item?id=" + $(this).data("id"), function(data) {
  const tempContainer = $('<div>').html(data);
  // 假设登录页有唯一标识的元素，比如id为"login-page"的容器
  if (tempContainer.find('#login-page').length > 0) {
    parent.location.reload();
    return;
  }
  $("#modal-edit-item").find(".modal-body").html(data);
});

这种方法依赖页面结构，后续登录页修改时需要同步调整前端代码，优先级低于前两种方案。

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