点击按钮后页面不加载的问题排查及解决方法

概述 #

登录成功后页面重定向至index页面，点击该页面的"Test Button"按钮，预期调用API并加载test页面，但实际仅发起API请求，页面未跳转，仅在开发者工具中能看到test页面的HTML代码。

相关代码 #

index.html 按钮事件代码 #

<script>
$(document).ready(function() {
    // Logout button event
    $('#logoutButton').click(function() {
        // Remove token from local storage
        localStorage.removeItem('accessToken');
        // Redirect to login page
        window.location.href = '/login';
    });

    // Test button event
    $('#testButton').click(function() {
        // Retrieve token from local storage
        const token = localStorage.getItem('accessToken');
        if (token) {
            $.ajax({
                url: '/api/test', // URL of the server to request
                type: 'GET', // HTTP method
                beforeSend: function(xhr) {
                    // Add token to request header
                    xhr.setRequestHeader('Authorization', token);
                },
                success: function(data) {
                    // Logic on request success
                    console.log("Test request successful:", data);
                    alert("Test request successful");
                },
                error: function(xhr, status, error) {
                    // Logic on request failure
                    console.error("Test request failed:", xhr.responseText);
                    alert("Test request failed");
                }
            });
        } else {
            alert("Token not found. Please login again.");
        }
    });
});
</script>

代码逻辑：从localStorage获取token并添加到请求头发送。

JwtAuthorizationFilter 核心代码 #

@Override
protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException {
    // Extract token from header
    log.info("Extracting token from header");
    String tokenValue = jwtUtil.getJwtFromHeader(req);
    log.info("Token: " + tokenValue);

    if (StringUtils.hasText(tokenValue)) {

        // Token validation
        if (!jwtUtil.validateToken(tokenValue)) {
            log.info("Token Error");
            return;
        }
        Claims info = jwtUtil.getUserInfoFromToken(tokenValue);

        try {
            setAuthentication(info.getSubject());
        } catch (Exception e) {
            log.error(e.getMessage());
            return;
        }
    } else {
        log.info("No token present.");
    }

    filterChain.doFilter(req, res);
}

// Process authentication
public void setAuthentication(String loginId) {
    log.info("Authentication successful");
    SecurityContext context = SecurityContextHolder.createEmptyContext();
    Authentication authentication = createAuthentication(loginId);
    context.setAuthentication(authentication);

    SecurityContextHolder.setContext(context);
}

// Create authentication object
private Authentication createAuthentication(String loginId) {
    log.info("Creating authentication object");
    UserDetails userDetails = userDetailsService.loadUserByUsername(loginId);
    return new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
}

日志显示：已完成请求头token提取，认证对象创建成功。

Test.html 页面代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
    crossorigin="anonymous"></script>
    <title>Test Page</title> 
</head> 
<body> 
<h1>This is a test page.</h1> 
</body> 
</html>

控制台日志 #

2024-02-26T15:01:04.238+09:00  INFO 60005 --- [nio-8081-exec-1] JWT Verification and Authorization       : Token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0NiIsImF1dGgiOiJPV05FUiIsImlhdCI6MTcwODkyNDY0NiwiZXhwIjoxNzA4OTI4MjQ2fQ.TLjHCc1_ZtTbzGb-2c0ueLmxgCyxQf1rUQs4DkqMv_c
2024-02-26T15:01:04.259+09:00  INFO 60005 --- [nio-8081-exec-1] JWT Verification and Authorization       : Authentication successful
2024-02-26T15:01:04.259+09:00  INFO 60005 --- [nio-8081-exec-1] JWT Verification and Authorization       : Creating authentication object
Hibernate: 
    /* <criteria> */ select
        u1_0.id,
        u1_0.email,
        u1_0.login_id,
        u1_0.password,
        u1_0.role 
    from
        users u1_0 
    where
        u1_0.login_id=?
2024-02-26T15:01:04.330+09:00  INFO 60005 --- [nio-8081-exec-1] TestController                           : test controller

确认TestController已被调用，但页面未加载。

关键信息总结 #

• 登录成功后正常重定向至index页面
• 目标：从index页面跳转至test页面
• 授权过滤器已处理请求，token传递正确
• 请求已到达TestController，但页面未加载

请问问题出在哪里？求解决思路。

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