cookie 적용하기

in MOVESTER on BACKEND




지난 포스팅에서 언급했다시피 뭅스터는 유저 인정 토큰을 client-쿠키 server-redis에 저장할 것이다.
그러면 쿠키를 어떻게 저장하고 삭제하는지 알아보자.


cookie-parser 라이브러리를 활용하지 않고 express 내장 cookie 를 활용할 수 있다.
지난 프로젝트인 ‘으랏챠피디아’에서 해당 방법으로 개발하였는데, 으랏챠 피디아의 코드를 살펴보자.


서버에서 클라이언트로 쿠키 전송

res
    .cookie('access_token', token, { expires: ACCESS_TOKEN_EXPIRED, httpOnly: true })
    .status(200)
    .json(
      resData.successTrue(resMessage.SIGNUP_SUCCESS, {
        isAuth: true,
        email: signupUser.email,
        username: signupUser.username,
      })
    );

다음과 같이 response시에 cookie로 (key, value, option)으로 전송한다.(cookie는 kye-value 속성이다.)
option으로 만료기한과 httpOnly를 주었는데, 만료 기한은 쿠키만의 강력한 장점이므로, 만료기한을 설정해주자.
또한 httpOnly 속성도 보안을 위해 필수로 주어야 한다.✨

그럼 해당 api 를 응답받은 클라이언트의 쿠키에 access_token 값으로 token이 잘 들어간다!


클라이언트에서 서버로 쿠키 전송

클라이언트에서는 A라는 서버에서 쿠키를 받았으면, 그 후에 A라는 서버에 api 요청을 할 때,
별도 처리를 하지 않더라도 사전에 받은 쿠키를 전송한다. (정확히는 domain이다.)
때문에 클라이언트에서는 서버로 쿠키를 전송하기 위해 처리할 작업이 없다!


서버에서 클라이언트가 보낸 쿠키 값 확인

const token = req.headers.cookie?.split('access_token=')[1];

쿠키는 header에 저장되어 오기 때문에 다음과 같이 req.headers.cookie로 가져오면 된다.
옵셔널 체이닝은 쿠키가 없을 때의 에러핸들링 처리를 위해 추가하였고,
한 도메인에서 여러 쿠키를 줬을 때를 대비하여, key 값인 access_token= 으로 값을 구한다.
(참고로 헤더에는 쿠키가 key=value로 들어온다.)


서버에서 클라이언트의 쿠키 삭제

쿠키는 서버에서 만들고 서버에서 삭제한다!✨✨
(클라이언트에서 쿠키를 삭제할 수 있지만, 절대적으로 지양하는 방법이다)

res.clearCookie('access_token').status(200).json(resData.successTrue(resMessage.LOGOUT_SUCCESS));

response시, clearCookie(key) 를 내려주면, 해당 api를 요청한 클라이언트의 쿠키의 key 값이 사라진다.



위의 방식대로 express 내장 쿠키를 사용해도 되지만 cookie-parser 라이브러리를 사용하면 더욱 간편하게 쿠키를 다룰 수 있다. (보안 문제도 내부적으로 처리해준다.)


npm install --save cookie-parser 해당 명령어를 통해 cookie-parser 를 설치하자.

index.js

const cookieParser = require('cookie-parser');
app.use(cookieParser())

express에게 해당 라이브러리를 알려주고 미들웨어로 등록해주자.


서버에서 클라이언트로 쿠키 전송

return res
    .status(CODE.OK)
    .cookie('accessToken', result.token.accessToken, { httpOnly: true })
    .cookie('refreshToken', result.token.refreshToken, { httpOnly: true })
    .json(form.success(result.admin));



서버에서 클라이언트가 보낸 쿠키 값 확인

if (!req.cookies.accessToken) {
    return res.status(CODE.UNAUTHORIZED).json(form.fail(MSG.UNAUTHORIZED));
  }

cookie-parser를 사용하면, req.cookies 를 통해 쿠키 값을 확인 할 수 있다.


서버에서 클라이언트의 쿠키 삭제

res.clearCookie('accessToken').clearCookie('refreshToken').status(CODE.OK).json(form.success(MSG.LOGOUT_SUCCESS));