[Vue] 아이디 저장 구현하기(vue-cookies)

cookie-parser npm docs
vue-cookies npm docs

사용할 라이브러리 선택

처음에 아이디 저장을 구현하기 위해 구글링을 해서 찾았던 건 cookie-parser였다.
그런데 공식 docs도 Vue로 되어 있지 않았고 구글링을 해봐도 Vue에서 cookie-parser를 사용한 사람을 찾기 어려웠다. 그러다가 vue-cookies(vue-cookie와 다름!)를 발견하고 몇 가지 글을 읽어본 뒤 좀 더 쉽게 구현할 수 있을 것 같단 생각이 들어서 이걸 사용하기로 결정했다.

+) 참고한 글

https://kyounghwan01.github.io/blog/Vue/vue/vue-cookies/

구현 과정

1. 설치

npm i vue-cookies

2. main.js에 등록

import vueCookies from "vue-cookies";

Vue.use(vueCookies);

// 필요할 경우 쿠키 만료기간 세팅
Vue.$cookies.config("7d");

3. Login.vue에서 사용

전역에서 import 했기 때문에 Login.vue에서는 따로 등록 없이 사용 가능하다.

<script>
export default {
  name: "Login",
  data() {
    return {
      // key값(=emailCookie)에 해당하는 쿠키를 가져온다.
      email: this.$cookies.get("emailCookie"),
      emailSave: false,
      ...
    };
  },
  methods: {
    login() {
      ...
      if (this.emailSave) {
        // 쿠키 key(=emailCookie), value(=this.email) 쌍을 저장한다.
        this.$cookies.set("emailCookie", this.email);
      }
      ...
    },
  },
};
</script>

생각보다 간단히 구현할 수 있었다.
저장한 쿠키는 크롬 개발자 도구 > 애플리케이션 > 쿠키에서 확인 가능하다.