버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문
개요로그인 성공 후 인덱스 페이지로 넘어갑니다.인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, 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 가 있을 때 헤더에서 토큰이 추출되는 거까지 로그에 다 출력되고, 인증 객체까지 생성되는 걸 확인했습니다. Console2024-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 코드만 출력이 됩니다. 자료 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> 정리로그인 성공 후 인덱스 페이지로 넘어감해당 인덱스 페이지에서 test 페이지로 넘어가고자 함인가 필터 모두 거치고, 토큰 값이 전달되는 거까지 확인했음test controller 까지 요청되지만, 정작 페이지는 불러와지지 않음 대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,