HTML과 JavaScript로 헤더에 엑세스 토큰을 넣고 싶습니다.

Question

저는 스프링을 개발하고 있고 상황상 뷰까지 구현을 하게 되었습니다. 인증은 JWT 방식으로 진행하고 있습니다. 매 요청 필터마다 헤더에 있는 엑세스 토큰을 추출해서 유효성 검증을 합니다.뷰는 HTML과 JS를 사용하며 동적 페이지는 타임리프로 작성하고 있습니다. 헤더에 엑세스 토큰을 넣기 위해 fetch를 사용하고 있습니다. fetch를 사용해서 접근하면 인증이 잘 되지만 url이 변경되지 않기 때문에 뒤로 가기 버튼을 누르면 엉뚱한 첫 페이지가 나옵니다. url이 바뀌지 않으니 당연한 상황이죠. 그래서 window.location.href 를 통해서 원하는 url로 변경하려고 하는데, 그러면 또 헤더에 토큰을 넣을 수 없으니 403 Forbidden이 발생합니다. 예시 코드 첨부해드리겠습니다. document.getElementById('committee-history').addEventListener('click', function(event) { event.preventDefault(); const accessToken &#61; localStorage.getItem('accessToken'); if (accessToken) { fetch('/committee/history', { method: 'GET', headers: { 'Authorization': 'Bearer ' &#43; accessToken } }) .then(response &#61;> { if (response.ok) { return response.text(); } else if (response.status &#61;&#61;&#61; 403) { alert('접근 권한이 없습니다.'); throw new Error('Access denied'); } else { alert('Failed to fetch committee data.'); throw new Error('Failed to fetch committee data'); } }) .then(html &#61;> { document.open(); document.write(html); document.close(); }) .catch(error &#61;> { console.error('Error:', error); }); } else { alert('Access token not found.'); } }); html과 js 고수님들께 질문 올립니다. 감사합니다.

하얀뼈 · Answer

쿠키에 Authorization: 님토큰설정해두세요

토토땅 · Answer

하얀뼈님 답변이 가장 쉬운(?) 방법인 것 같고 다른 방법으로는 document 내용 갱신과 history를 수동으로 동기화해줘도 되긴 될 것 같습니다.document.write()와 history.pushState()를 항상 같이 해주시는 거죠. 그냥 SPA에서 하는 걸 수동으로 해주는 느낌이라고 보시면 될 것 같네요. 뒤로 가기나 앞으로 가기도 수동으로 처리해줘야 해서 약간 더 복잡할 것 같긴 합니다.다만 주의사항이 아래와 같이 pushState와 document코드를 동기적으로 수행하면 history stack이 뭔가 정상동작하지 않는 것 같네요.window.history.pushState({}, '', path); // history stack에는 쌓이는 것 같은데 뭔가 정상동작하지 않음.. document.open(); document.write(html); document.close();그래서 아래와 같이 pushState와 문서 갱신을 비동기로 처리하면 정상 동작하네요.function loadContent(path) { fetch(...) -> document 관련 코드로 문서 갱신... } function navigate(path) { window.history.pushState({}, '', path); loadContent(path); } document.getElementById('committee-history').addEventListener('click', () => { navigate('/committee/history'); }); // 뒤로가기, 앞으로가기 이벤트 발생 시 문서 갱신. window.addEventListener('popstate', (event) => { loadContent(window.location.pathname); });

HTML과 JavaScript로 헤더에 엑세스 토큰을 넣고 싶습니다.

2개의 답변

Q&A 목록