TIL 23.03.07

오늘은 Cookie에 대해서 배웠고, 실습을 진행하였다.

 

쿠키

HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우,
그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일

 

실습 - 로그인 로그아웃 구현

클라이언트와 서버가 쿠키를 주고 받으면서 로그인, 로그아웃을 구현을 실습하였다.

 

작동흐름에 따라 실습내용을 정리해보고자 한다.

 

로그인

 

1. 서버로 로그인 요청

 

우선 Axios를 통하여 로그인을 처리하는 post 요청을 보내준다.

 

클라이언트

axios.post("http://localhost:4000/login", {loginInfo, checkedKeepLogin})

 

2. 서버에서 로그인 요청 처리

 

 

서버

/login.js

 

data에 저장된 아이디, 비밀번호와 요청받은 아이디, 비밀번호가 일치하는 지 확인 작업

  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter(
      (user) => user.userId === userId && user.password === password
    )[0],
  };

 

일치 하지 않는다면  로그인에 실패하여 에러를 출력하고,

일치한다면 로그인에 성공하여 클라이언트에 쿠키를 전송한다.

 

이 때, res.cookie 를 사용하여  전달인자로 쿠키 이름, 쿠키 값, 쿠키 옵션을 받은 뒤

클라이언트에 쿠키를 전달한다.

if (userInfo.id === undefined) {
	... 
} else {
	res.cookie('cookieId', userInfo.id, cookiesOption)
}

 

로그인을 유지하고 싶은 경우애는 

쿠키 옵션의 maxAge를 조작하여서 쿠키를 유지해준다.

또한 쿠키 옵션의 expires을 조작하여 쿠키를 삭제할 수 있다.

 

 else if (checkedKeepLogin === true) {

	cookiesOption.maxAge = 1000 * 60 * 30
	cookiesOption.expires = new Date(Date.now() + (1000 * 60 * 30) )
	// 지금 시간 + 30분 후에 쿠키를 삭제한다는 의미입니다.
	res.cookie('cookieId', userInfo.id, cookiesOption)
}

 

이후 /userinfo 엔드포인트로 리다이렉트 시켜준다.

res.redirect("/userinfo")

 

/userInfo.js

리다이렉트된 응답을 보면, 쿠키를 전달받은 것을 알 수 있다.

 

전달받은 쿠키 안에 있는 userinfo.id를 이용하여, 클라이언트에 전달해줄 유저 정보를 가져온다.

const cookieId = req.cookies.cookieId
const userInfo = {
    ...USER_DATA.filter((user) => user.id === cookieId)[0],
 };

 

쿠키가 없을 때나 유효하지 않은 id일 경우, 인증불가 메시지를 보내고

로그인이 가능할 경우, 비밀번호를 삭제후에, 클라이언트 단으로 전송한다.

 

f (!cookieId || !userInfo.id){
    res.status(401).send('Not Authorized');
} else {
		// 비밀번호는 민감한 정보라서 삭제 후에 보내야 합니다.
    delete userInfo.password
    res.send(userInfo)
}

 

로그아웃

 

클라이언트

로그아웃을 처리하는 엔드포인트로 요청

axios.post("http://localhost:4000/logout")

 

 

서버

/logout.js

서버는 쿠키를 삭제

res.status(205).clearCookie('cookieId', cookiesOption).send("logout")