버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문

24.02.26 14:42 작성 24.02.26 14:46 수정 조회수 128

0

개요

로그인 성공 후 인덱스 페이지로 넘어갑니다.

인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, test 로드하는 api 를 호출하도록 했습니다.

그러나 api 요청만 진행되고, 페이지는 바뀌지 않습니다.

개발자도구 메시지에 해당 페이지의 html 코드만 출력됩니다.

 

참고자료

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인덱스 페이지</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<h1>환영합니다!</h1>
<p>성공적으로 로그인하셨습니다.</p>
<button id="logoutButton">로그아웃</button>
<button id="testButton">테스트 버튼</button>

<script>
    $(document).ready(function() {
        // 로그아웃 버튼 이벤트
        $('#logoutButton').click(function() {
            // 로컬 스토리지에서 토큰 제거
            localStorage.removeItem('accessToken');
            // 로그인 페이지로 리다이렉션
            window.location.href = '/login';
        });

        // 테스트 버튼 이벤트
        $('#testButton').click(function() {
            // 로컬 스토리지에서 토큰 가져오기
            const token = localStorage.getItem('accessToken');
            if (token) {
                $.ajax({
                    url: '/api/test', // 요청할 서버의 URL
                    type: 'GET', // HTTP 메서드
                    beforeSend: function(xhr) {
                        // 요청 헤더에 토큰 추가
                        xhr.setRequestHeader('Authorization', token);
                    },
                    success: function(data) {
                        // 요청 성공 시 로직
                        console.log("테스트 요청 성공:", data);
                        alert("테스트 요청 성공");
                    },
                    error: function(xhr, status, error) {
                        // 요청 실패 시 로직
                        console.error("테스트 요청 실패:", xhr.responseText);
                        alert("테스트 요청 실패");
                    }
                });
            } else {
                alert("토큰이 없습니다. 다시 로그인해주세요.");
            }
        });
    });
</script>
</body>
</html>

 

보이는 것처럼 로컬 스토리지에서 토큰을 가져온 후 요청 헤더에 다시 담아서 전송합니다.

JwtAuthorizationFilter

@Override
protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException {
    // 헤더에서 토큰 추출
    log.info("헤더에서 토큰 추출");
    String tokenValue = jwtUtil.getJwtFromHeader(req);
    log.info("토큰 : " + tokenValue);

    if (StringUtils.hasText(tokenValue)) {

        // 토큰 유효성 검사
        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("토큰이 없습니다.");
    }

    filterChain.doFilter(req, res);
}

// 인증 처리
public void setAuthentication(String loginId) {
    log.info("인증 성공");
    SecurityContext context = SecurityContextHolder.createEmptyContext();
    Authentication authentication = createAuthentication(loginId);
    context.setAuthentication(authentication);

    SecurityContextHolder.setContext(context);
}

// 인증 객체 생성
private Authentication createAuthentication(String loginId) {
    log.info("인증 객체 생성");
    UserDetails userDetails = userDetailsService.loadUserByUsername(loginId);
    return new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
}

이렇게 JwtAuthorizationFilter 가 있을 때 헤더에서 토큰이 추출되는 거까지 로그에 다 출력되고, 인증 객체까지 생성되는 걸 확인했습니다.

 

Console

2024-02-26T14:31:24.699+09:00  INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가                              : 토큰 : eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0NiIsImF1dGgiOiJPV05FUiIsImlhdCI6MTcwODkyNDY0NiwiZXhwIjoxNzA4OTI4MjQ2fQ.TLjHCc1_ZtTbzGb-2c0ueLmxgCyxQf1rUQs4DkqMv_c
2024-02-26T14:31:24.706+09:00  INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가                              : 인증 성공
2024-02-26T14:31:24.706+09:00  INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가                              : 인증 객체 생성
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-26T14:31:24.722+09:00  INFO 59767 --- [nio-8081-exec-3] TestController                           : test controller

로그를 보면 test controller 를 호출하는 거까지 확인할 수 있었습니다.

그러나 페이지는 로드되지 않고, 메시지에 html 코드만 출력이 됩니다.

 

자료

페이지.png

 

Test.html

<!DOCTYPE html>
<html lang="ko">
<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>

 

정리

  1. 로그인 성공 후 인덱스 페이지로 넘어감

  2. 해당 인덱스 페이지에서 test 페이지로 넘어가고자 함

  3. 인가 필터 모두 거치고, 토큰 값이 전달되는 거까지 확인했음

  4. test controller 까지 요청되지만, 정작 페이지는 불러와지지 않음

 

대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,

 

답변 1

답변을 작성해보세요.

0

ym2483님의 프로필

ym2483

2024.02.26

ajax success 부분 보시면 다른 동작 관련 코드는 없고 cosnole.log 에 data를 넣으셔서 콘솔에 정상적으로 표시되고 있습니다.

성공시 받아온 data(html)가 페이지에 표시되길 원한다면 현재 페이지의 html 영역을 data 내용으로 교체하거나 위에 로그아웃 이벤트처럼 페이지 이동을 시켜야 할 것 같네요..

모코코님의 프로필

모코코

질문자

2024.02.26

말씀주신 것처럼 window.location 으로 구현해봤습니다!!...만,,,

test.html 에 접근하기 위해서 해당 파일 내에 토큰을 꺼내오는 자바스크립트를 생성했지만,

아예 자바스크립트가 작동하질 않네요,,,

 

포스트맨으로 /api/test 를 get 으로 호출해봤는데, 헤더에 유효토큰을 삽입했음에도 아예 test 페이지가 로드되지 않고, 그냥 로그인 페이지로 리로드 되는 상황만 발상합니다,,,

 

토큰 검증을 위해 토큰을 추출하는 자바스크립트를 작성했더니, 아예 접근이 못하는 상황이 발생하니 너무 답답합니다,,

 

원래 없는 기능을 제가 손보고 있는 걸까요...

 

이 글과 비슷한 Q&A