1월15일

로그인 API의 Token 처리

before

 

controller

const response = await this.usersService.login(email, password);

res.cookie('accessToken', response.accessToken);
res.cookie('refreshToken', response.refreshToken);

res.status(response.code).json({ message: response.message });

 

기존에는 로그인 API 요청에 대해 모든 로그인 과정이 끝나면 백엔드에서 쿠키를 저장해줬었는데

쿠키를 생성하는 주체가 백엔드 서버가 되면 안된다는 피드백을 받았다.

프론트가 완전 분리 되어있다면 백엔드에선 쿠키를 만들어 전달하지 않습니다.
응답값으로 쿠키를 주고, 프론트에서 쿠키를 굽던 localstorage 를 사용하던 결정을 합니다.

모바일애플리케이션에서는 쿠키가 존재 하지 않기 때문에,
서버가 쿠키를 만들어 전달하면 모바일애플리케이션은 그 토큰을 사용할수 없습니다. (어렵습니다)

 

API 관련해서 처음 수업을 받을 때 샘플 API 문서에 

로그인 응답값으로 왜 쿠키를 전달하고 있지? 

그냥 바로 저장시켜버리고 로그인 했다는 메시지만 전달해주면 되는거 아닌가? 

라는 생각을 했었는데 위 이유 때문이었다는게 머리 스쳤다.

 

그래서 이제서야 잘못 처리하고 있었다는걸 깨닫고 바로 수정 작업에 들어갔다.

 

after

작업은 간단해보였다.

기존에 res.cookie로 저장하던걸 

그냥 res.json으로 각각의 accessToken과 refreshToken을 프론트엔드에서 요청한 곳으로 전달한 뒤

거기서 알아서 처리하게끔 변경해주면 됐다.

 

controller

const response = await this.usersService.login(email, password);

if (response.code !== 200) {
  return res.status(response.code).json({ message: response.message });
}

return res.status(response.code).json({
  message: response.message,
  accessToken: response.accessToken,
  refreshToken: response.refreshToken,
});

프론트로 토큰들 전달

 

login.js

// ..생략
if (code === 200) {
  document.cookie = `accessToken=${res.accessToken}`;
  document.cookie = `refreshToken=${res.refreshToken}`;

  location.href = '/';
}

프론트에서 js로 어떻게 쿠키를 저장하나 막연했는데

검색해보니까 너무쉬워 깜짝 놀랐다.

 

참고한 곳

https://velog.io/@rudnf003/javascript-쿠키-생성-및-관리

[javascript] 쿠키 생성 및 관리