Login 구현 - 약간 복잡해짐.
JsessionId가 만들어지는 것이 그냥 페이지 들어가자마자 만들어지는데 정상인가?
// login
// 페이지 이동외에 어떤 작업 후에 return을 viewResolver로 하는 것은 잘못된 방법이다.
@GetMapping("/login")
public String loginPage() {
return "user/loginForm";
}
// loginProc로 페이지가 이동하지만 처리하는 이동이고 보여주는 페이지가 아니다.
@PostMapping("/loginProc")
public @ResponseBody String loginProc(User user, HttpSession session) {
User principal = userRepository.findByUsernameAndPassword(user);
if (principal != null) {
session.setAttribute("principal", principal);
return Script.href("로그인이 완료되었습니다.", "/");
} else {
// return Script.outText("아이디나 비밀번호가 틀렸습니다."); 이렇게만 하면 login Proc로 이동함
return Script.href("비밀번호나 아이디가 틀렸습니다.", "/login");
// 근데 이 부분은 script로 처리하는 것이 아닌 다른 방법으로 확인해줘야 할 것 같다.
}
}
// logout
@GetMapping("/logout") //getMapping으로 해줘야함
public @ResponseBody String logout(HttpSession session) {
session.invalidate();
return Script.href("로그아웃하였습니다.", "/");
}
@ResponseBody를 써줘야한다 안 쓰면 viewResolver 작동하기 때문에 페이지 열기 기능 밖에 못쓰기 때문이다.
참고 React 로그인 할 때
form태그를 이용하는 것이 아닌
axios로 post주소날려서 함
const onSubmit = (e) => {
e.preventDefault();
// console.log(form);
axios
.post(
"<http://59.20.79.42:58002/jwt/common>",
form,
{
headers: {
// Accept: 'application/json',
"Content-Type": "application/json",
},
}
)
.then((response) => {
console.log(response);
alert(response.data.message);
localStorage.setItem("jwtToken", response.data.data.jwtToken);
localStorage.setItem("userId", response.data.data.userId);
localStorage.setItem("nickname", response.data.data.nickname);
history.push("/home");
})
.catch((error) => {
console.log(error.response);
});
};
script 부분
그냥 페이지 이동할 때 return에다가 redirect 쓰는데 JS쓰기 위해 script를 이용한다.
package com.cos.springblog2.util;
public class Script {
public static String href(String msg, String uri) {
return
"<script>"+
"alert('"+ msg +"');"+
"location.href='" + uri + "';" +
"</script>";
}
public static String href(String uri) {
return
"<script>"+
"location.href='" + uri + "';" +
"</script>";
}
public static String back(String msg) {
return
"<script>" +
"alert('" + msg + "');" +
"history.back();" +
"</script>";
}
}