브라우저 저장소 Cookie

😎 브라우저 저장소를 이용한 인증 값 관리

쿠키

: 로그인(인증) 결과로 얻은 토큰 값을 브라우저 레벨에 저장해서 페이지를 새로고침해도 로그인 상태를 유지하기 위해서 사용한다.
: 개발자 도구 > application 탭의 cookies에서 쿠키를 확인할 수 있다.

쿠키에 값을 저장하기

: 로그인 결과로 얻은 토큰과 유저 이름을 쿠키(브라우저 레벨)에 저장한다.
: 기존에는 토큰 값을 뷰 스토어에 저장했고, 페이지를 새로고침 할 경우 vuex가 초기화 되면서 token값에 빈 문자열이 들어갔기 때문에 로그인 상태가 유지되지 않았다.

const { data } = await loginUser(userData);
saveAuthToCookie(data.token);
saveUserToCookie(data.user.username);

쿠키에 있는 값을 가져오기

: 페이지를 처음 로드하거나 새로고침 할 경우 뷰 스토어가 초기화 되는데, 이때 쿠키에 저장된 값을 가져와서 세팅한다.

state: {
    username: getUserFromCookie() || '',
    token: getAuthFromCookie() || '',
},

쿠키에 있는 값 삭제하기

https://www.w3schools.com/js/js_cookies.asp