SpringBoot+Thymeleaf场景下session销毁如何让片段请求实现整父页重定向

问题根源 #

点击nextPageDiv发起的是AJAX异步请求，浏览器对异步请求的302响应默认处理逻辑为：将重定向后的响应内容加载到本次请求指定的更新容器内，因此只会替换containerList片段，不会触发整页跳转。

第一步：调整拦截器逻辑 #

修改拦截器，区分普通同步请求和AJAX异步请求，异步请求不返回302，而是返回特殊状态码+自定义重定向头，交给前端处理跳转：

@Component
public class MySessionInterceptor implements HandlerInterceptor{
 
  ...

 @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
        Object handler) throws Exception {
        HttpSession session=request.getSession(); 
        // 这里建议补充登录态属性判断，比单纯session.isNew()更准确，避免首次访问误拦截
        // 示例：if (session.getAttribute("loginUser") == null)
        if (session.isNew()) {
            // 判断是否为AJAX请求
            String xRequestedWith = request.getHeader("X-Requested-With");
            if ("XMLHttpRequest".equals(xRequestedWith)) {
                response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                // 自定义响应头，存放登录页地址
                response.setHeader("X-REDIRECT-LOGIN", request.getContextPath() + "/login");
            } else {
                // 普通同步请求走正常302重定向
                response.sendRedirect(request.getContextPath() + "/login");
            }
            return false;
        }
        return true;
 
    }

  ...
}

第二步：前端添加全局AJAX监听 #

全局捕获异步请求的401状态，读取重定向头后触发整页跳转，根据你使用的AJAX工具选择对应实现即可：

• 若使用jQuery：

$(document).ajaxComplete(function(event, xhr, settings) {
  if (xhr.status === 401) {
    const loginUrl = xhr.getResponseHeader('X-REDIRECT-LOGIN');
    if (loginUrl) window.location.href = loginUrl;
  }
});

• 若使用HTMX（常与Thymeleaf片段请求搭配）：

document.body.addEventListener('htmx:responseError', function(evt) {
  if (evt.detail.xhr.status === 401) {
    const loginUrl = evt.detail.xhr.getResponseHeader('X-REDIRECT-LOGIN');
    if (loginUrl) window.location.href = loginUrl;
  }
});

• 若使用原生Fetch：

// 封装全局fetch方法，每次请求后判断状态
async function myFetch(url, options) {
  const res = await fetch(url, options);
  if (res.status === 401) {
    const loginUrl = res.headers.get('X-REDIRECT-LOGIN');
    if (loginUrl) window.location.href = loginUrl;
    return;
  }
  return res;
}

注意事项 #

• 登录页地址建议拼接request.getContextPath()，避免项目部署在非根路径下跳转出错
• 不建议直接在异步请求的响应里返回JS脚本跳转，全局监听适配性更高，无需修改每个片段请求的代码

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