버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문
570
작성한 질문수 8
개요
로그인 성공 후 인덱스 페이지로 넘어갑니다.
인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, 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 코드만 출력이 됩니다.
자료
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 까지 요청되지만, 정작 페이지는 불러와지지 않음
대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,
답변 1
0
ajax success 부분 보시면 다른 동작 관련 코드는 없고 cosnole.log 에 data를 넣으셔서 콘솔에 정상적으로 표시되고 있습니다.
성공시 받아온 data(html)가 페이지에 표시되길 원한다면 현재 페이지의 html 영역을 data 내용으로 교체하거나 위에 로그아웃 이벤트처럼 페이지 이동을 시켜야 할 것 같네요..
0
말씀주신 것처럼 window.location 으로 구현해봤습니다!!...만,,,
test.html 에 접근하기 위해서 해당 파일 내에 토큰을 꺼내오는 자바스크립트를 생성했지만,
아예 자바스크립트가 작동하질 않네요,,,
포스트맨으로 /api/test 를 get 으로 호출해봤는데, 헤더에 유효토큰을 삽입했음에도 아예 test 페이지가 로드되지 않고, 그냥 로그인 페이지로 리로드 되는 상황만 발상합니다,,,
토큰 검증을 위해 토큰을 추출하는 자바스크립트를 작성했더니, 아예 접근이 못하는 상황이 발생하니 너무 답답합니다,,
원래 없는 기능을 제가 손보고 있는 걸까요...
실습 권한이 없네요··· 이건 ··· 좀··· 401 에러떠요
0
9
1
inheritance startegy 선택시 고려사항
0
11
0
[할인쿠폰] 코테의 바이블[JAVA] 50% 할인 쿠폰 관련
0
13
1
몽고 db 접속 오류
0
18
1
Entity 동등성 비교
0
14
1
패키지 구분에 대해 궁금한게 있습니다
0
20
2
안녕하세요. 바뀐 채점사이트 관련해서 문의드립니다.
0
19
1
3강 질문
0
27
2
갑자기 채점 사이트가 바뀌었어요
0
26
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
34
1
코드 자료
0
34
2
2강 nodejs 3단계 설명 질문
0
38
1
문제 리스트 페이지
0
25
1
인가 코드 발급(프론트 vs 백)
0
30
2
part8 Notion 링크
0
25
1
채점 사이트 관련 질문드립니다
0
21
1
인텔리제이 MCP 서버 설정 관련
0
34
2
imagesLoaded에 관한 질문
0
19
2
조회속도 개선에서 더 개선하는 방법이 궁금합니다.
0
34
2
useEffect와 lifecycle문의
0
30
2
필기자료 사라졌나요?(실기 일주일만에 안돼서 재도전-_-)
0
40
2
프론트엔드 학습 수준 문의
0
42
2
servlet과 container에 대한 질문입니다
0
25
1
질문있습니다
0
28
1