[FE_Bootcamp] Main Project_로그인/회원가입
홈 화면을 만들고, 홈 화면에서 바로 이동 할 수 있는 페이지인 로그인과 회원가입 페이지를 만들기로 했다.
드디어 서버 통신을 사용하고, 백엔드와의 협업을 하는 페이지라 조금 무섭기도 했지만 프리 프로젝트를 참고해서 천천히 해보기로 했다
1. 서버 통신
로그인을 하기 위해서는 회원 가입이 먼저 필요했지만, 로그인을 우선 구현하기로 했다. 일단 서버에 테스트 이메일과 비밀번호를 넣어놓고, 그 이메일로 로그인을 했을 때 성공하는지 확인을 해 보았다.
로그인은 POST 메서드를 사용하므로, 따로 Header 없이 Body만 전송해주면 됐다.
Body도 email과 password만 포함되면 되므로, email과 password를 입력받아 Body에 넣고, 이를 axios를 통해 서버로 전송해주고자 했다.
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const login = () => {
const memberInfo = {
email: email,
password: password,
}
axios
.post(`${apiUrl.url}/login`, memberInfo)
.then(res => {
console.log(res)
})
.catch(err =>{
console.log(err)
setEmailValidMessage('이메일과 비밀번호를 확인해주세요')
setPwValidMessage('이메일과 비밀번호를 확인해주세요')
})
}
다행히 바로 응답 헤더가 넘어오는 것을 확인 할 수 있었다.
응답 헤더에는 여러 정보들과 함께 로그인에 필요한 토큰들이 넘어온다.
그중 Refresh Token은 일정 시간이 지나면 파기되어 로그인 상태로 사용 가능한 기능들을 사용 할 수가 없게 된다.
이런 경우에는 다시 로그인을 해서 Refresh Token을 다시 받아와야 한다.
이 토큰들은 각종 기능에 필요하기 때문에, 어딘가에 저장해 두고 계속 가져다가 써야 한다.
여러가지 방법이 있는데, 우리가 흔히 듣는 세션, 쿠키 등의 보안성 높은 방법들도 있지만 우선 가장 쉬운 로컬 스토리지를 사용하기로 했다.
const login = () => {
const memberInfo = {
email: email,
password: password,
}
axios
.post(`${apiUrl.url}/login`, memberInfo)
.then(res => {
console.log(res)
localStorage.setItem('memberId', res.headers.memberid);
localStorage.setItem('Authorization-Token', res.headers.authorization)
localStorage.setItem('Refresh-Token', res.headers.refresh)
navigate('/accountbook')
})
.catch(err =>{
console.log(err)
setEmailValidMessage('이메일과 비밀번호를 확인해주세요')
setPwValidMessage('이메일과 비밀번호를 확인해주세요')
})
}
받아온 토큰을 단순히 로컬 스토리지에 저장하기만 하면 되는 작업이라, 단순히 코드 몇줄만 추가해주면 됐다.
그리고 로그인 성공시 바로 가계부 페이지로 이동 할 수 있도록 navigate를 넣어주고, 오류시 메시지도 뜨게 만들었다.
회원 가입 역시 똑같은 방법을 사용했다. 단지 로그인보다 요구하는 정보가 많았고, 이에 대한 유효성 검사가 많아졌을 뿐 로직은 그대로라서 별 어려움은 없었다. 오히려 로컬 스토리지에 저장할 것이 없어 더 간단하다고 느끼기도 했다.
const signup = () => {
const memberInfo = {
email: email,
password: password,
name: nickname,
phone: phonenum,
imageURL: 'https://www.svgrepo.com/show/362137/profile.svg',
premium: null,
address: ''
}
axios
.post(`${apiUrl.url}/members`, memberInfo)
.then(res => {
alert('회원 가입이 완료되었습니다!')
navigate('/login')
})
.catch(err =>{
console.log(err)
})
}
피드백 과정에서 회원 가입 완료 여부를 알기 힘들다고 하여 성공적으로 회원가입을 했을 시 alert로 알림을 보내주고, 로그인 페이지로 이동하게 하였다.
