Day19
게시글 작성 기능
테스트 연결에는 성공!
게시글 작성할 때 로그인 상태가 필요한데 아직 로그인이 완성되지 않아서 유저 정보를 빼고 했다.
로그인 기능
오늘은 로그인 기능 연동을 마쳐야한다!
로그인 기능이 되어야 CRUD에서 유저 정보를 담아 보낼 수 있기 때문이다.
- 클라이언트에서 로그인 요청을 하면, 서버에서 아이디와 비밀번호를 검사한 후 세션 ID를 보낸다.
- 클라이언트는 받은 세션 ID를 쿠키에 저장해 갖고있는다.
- 로그인 인증이 필요할 때마다 클라이언트는 갖고있는 세션ID를 서버에 보내고, 서버는 세션ID의 유효성 체크를 한 후 클라이언트에 알린다.
- 세션ID가 유효하다면 로그인을 유지시키고, 유저 정보를 조회할 수 있게 한다.
로그인 완료 시 useNavigate로 이동을 시켰더니 렌더링을 하지 않고 이동을 하니까 새로고침을 해야 로그인 상태로 변한다.
그래서 그냥 window.location.replace로 페이지 이동을 시키면서 새로고침을 한번 시켜주었다.
그리고 자꾸 클라이언트가 가지고 있는 세션ID는 변하지 않는데 리렌더링이 될 때마다 서버가 가지고 있는 세션ID가 변해서 로그인이 유지되지 않는 오류가 있었다.
원인을 찾는데 세시간이나 썼다. 코드 한 줄 때문에.....ㅠㅠ....
axios.defaults.withCredentials = true;
함수 밖에 있어야 할 코드인데 안에 집어넣어둬서 생기는 오류였다.
흑흑....
그랬더니 이번엔 useEffect 안에서 axios 수행 후 성공했을 때 useState에 값이 담기지 않는것이다.
한참을 찾아 axios를 함수로 만들어 useEffect 안에서 실행시키고 함수가 끝나면 다시 한번 실행시키는 형태로 만들었다.
그랬더니 잘 실행된다.
useEffect에 대해 잘 몰라서 생긴 해프닝이었다 ㅠ_ㅠ
useEffect(() => {
const isLogin = () => {
axios.post("http://localhost:8080/islogin", {
sessionID : cookie.sessionID
})
.then((response) => {
if(response.data.message === "로그인 성공") {
setLogin(true)
setUser(response.data)
}
})
}
isLogin();
}, []);험난하게 로그인 완성~..
참고 사이트
리액트 기초, 쿼리 스트링, useSearchParams
[React] 쿼리 스트링
React useState hook not updating with axios call
Getting Started | Recoil
[React] 리액트 페이지 새로고침 하는법
