[Vue.js] vue-cookie 사용 및 뷰 쿠키로 아이디 저장 체크박스 기능 구현하기

vue-cookie를 사용해서 구현할 것은 아래와 같다 !

아이디 저장 체크했을 시 쿠키로 아이디가 저장되고, 저장된 쿠키를 통해 아이디 저장 체크박스를 풀고 로그인 하기 전까지 아이디를 저장한다 !!

 

 

먼저, vue-cookie를 설치해주어야 한다.

 

1. vue-cookie 라이브러리 설치

npm install vue-cookie --save

https://www.npmjs.com/package/vue-cookie

vue-cookie

쿠키 사용법

// 'id'라는 Name과 'jain'라는 Value를 가지고 있고 하루 후에 만료되는 쿠키를 만든다.
this.$cookie.set('id', 'jain', 1);

// 'id'의 값을 가져온다.
this.$cookie.get('id');

// 'id'라는 이름을 가진 쿠키를 지운다.
this.$cookie.delete('id');

 

2-1. 쿠키 생성 (main.js)

main.js에 아래와 같은 코드를 추가한다.

var VueCookie = require("vue-cookie");
Vue.use(VueCookie);

 

2-2. 쿠키 생성 (login.vue)

 

1. 아이디 저장 체크박스 생성

v-model로 data() 에 있는 status와 연결을 해준다.

체크가 되어있을 때 값은 remember, 되어있지 않을 때는 not_remember로 설정

<b-form-group id="input-group-3">
  <b-form-checkbox
  v-model="status"
  value="remember"
  unchecked-value="not_remember">
  	아이디 저장
  </b-form-checkbox>
</b-form-group>

 

2. data()

기본 값은 not_remember로 설정해놓는다.

data() {
    return {
      status: "not_remember",
    };
  },

 

3. created()

data의 값을 셋팅하기 위해서 created에 rememberid가 Name 값인 쿠키가 있는지 확인한다.

있으면 status를 remember로 설정해놓고, 아이디는 쿠키의 value값으로 설정해준다.

  created() {
    if (this.$cookie.get("rememberid")) {
      this.status = "remember";
      this.user.userid = this.$cookie.get("rememberid");
    } else {
      this.status = "not_remember";
    }
    console.log(this.status);
    console.log(this.user.userid);
  },

 

4. method

로그인 버튼을 눌렀을 때

아이디 저장 체크 시 -> 쿠키에 저장

아이디 저장 체크 해제 시 -> 쿠키에서 삭제

를 수행해야 한다.

=> checkRememberId()

 

로그인이 되었을 때 수행되어야 하므로 로그인이 되었을 때인 if(this.isLogin) 안에 넣어주었다.

  methods: {
    ...mapActions(memberStore, ["userConfirm", "getUserInfo"]),
    async confirm() {
      await this.userConfirm(this.user); //토큰저장
      let token = sessionStorage.getItem("access-token"); //토큰 얻어오기
      if (this.isLogin) { // 로그인이 되었다면 아이디 저장의 체크여부를 따져주는 메소드 실행
        await this.getUserInfo(token);
        this.checkRememberId();
        this.$router.push({ name: "Main" });
      } else {
        alert("아이디 혹은 비밀번호를 확인해주세요.");
      }
    },
    checkRememberId() {
      if (this.status == "not_remember") {
        this.$cookie.delete("rememberid");
        console.log("rememberid 삭제");
      } else {
        this.$cookie.set("rememberid", this.user.userid);
      }
    },
  },