Spring Boot, thymeleaf ajax로그인 요청 (javascript)
글에 들어가기 앞서 필자는 리액트 서버와 스프링부트 서버 두 개를 동시에 열어서 로그인 및 다양한 요청을 먼저 구현 했었다 .
이유는 2022년 초 졸업 작품을 시작할 때 리액트와 연동하는 연습을 하던 버릇 때문에 모든 요청을 리액트와 하고 있었는데(리액트는 잘 몰랐던 시기.. 아직도 잘 모르지만)
이번에 리액트와 같이 스프링부트를 공부하면서 예전에 즐겨 썼던(?) 타임리프와 같이 자바스크립트로 비동기 요청을 해보면서 테스트 해보는 것도 재밌겠다. 라는 생각이 들어서 해보던 와중에 에러가 났다. 예전에 이런 비슷한 에러가 생긴 적이 있는데 그 때는 제대로 이해하지 못하고 넘어갔던 부분을 이번에 90% 정도 이해한 것을 바탕으로 글을 시작한다.
- React Login 요청 코드
/**
* 서버 로그인
* @param {*} props
* @returns
*/
function ServerLogin(props){
let login = {
username : null,
password : null
}
return <serverlogin className='server_test_login'>
<h3>서버 요청 로그인 테스트 화면</h3>
<form onSubmit={event=>{
event.preventDefault();
login.username = event.target._username.value;
login.password = event.target._password.value;
console.log(login);
axios.post('/login',login)
.then((response)=>{
sessionStorage.setItem("username",login.username);
props.onChangeMode();
console.log(response.data);
})
.catch(function(error){
console.log(error);
})
}}>
<p><input id="_username" name="_username" placeholder='ID' ></input></p>
<p><input id="_password" name="_password" placeholder='PW'></input></p>
<p><input type="submit" value="로그인 테스트 버튼"></input></p>
</form>
</serverlogin>
}
해당 정보를 인풋값에 입력하여 서버에 axios로 요청을 보내면
요청 payload에 JSON형식으로 보내진다.
그러면 미리 구현 해놓은 스프링부트 시큐리티에서 해당 요청을 받아 username과 password를 검사하여 세션을 쿠키에 담아 응답한다.
(세션 로그인 구현은 나중에 포스팅.. JWT도)
- 쿠키에 세션 담긴 크롬 클라이언트(리액트 서버)
이러한 방식으로 타임리프에서 자바스크립트 (AJAX)를 작성하여 비동기 요청을 보냈는데
- login.html
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
const userInfo = {
username: null,
password: null
}
function login() {
userInfo.username = document.getElementById('username').value;
userInfo.password = document.getElementById('password').value;
console.log(userInfo.username);
console.log(userInfo.password);
$.ajax({
url: "/login",
type: "POST",
data: userInfo,
}).done(function (res) {
console.log(res);
});
}
</script>
<strong>아아디 : </strong>
<span><input id="username"></span>
<br/>
<strong>비밀번호 : </strong>
<span><input id="password"></span>
<P><input type="button" onclick="login()" value="로그인"></P>
</body>
리액트의 axios와 달리 payload에 Form Data로 요청이 보내졌다.
스프링 시큐리티에는 form.disable해놨으니 당연히 될리가 없었다.
하지만 나는 요청을 보낼 때 form데이터에 데이터를 담은 적이 없으니 AJAX는 form data가 디폴트 인 것 같았다.
그래서 ajax부분을
$.ajax({
url: "/login",
type: "POST",
dataType:JSON,
data: JSON.stringify(userInfo),
}).done(function (res) {
console.log(res);
});
데이터 타입을 JSON으로 지정해주고 객체를 JSON에 담아서 요청을 보냈다.
그랬더니 .. 당연히 JSON으로 담겨서 보내져서 로그인이 성공 됐다..
세션값도 문제 없었다...
근데 이 form data의 정체는 아직도 모르겠다..
form data이거나 JSON 이거나 둘 중 하나여야 되는 줄 알았는데 form data의 JSON이라니.. 혼란스럽다..