Written by Dohu Jeon
on January 30, 2021

[Vue.js] 쿠키 사용

쿠키 생성

화면을 새로고침 했을 때 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서 게시판을 계속 볼 수 없는 인증상태가 되지 않으므로 그 정보를 cookie에 저장해야한다.
cookie를 이용해 브라우저 저장소에 저장하면 새로고침 되도 다시 브라우저 저장소에서 인증을 불러와, 연결이 끊어지지 않게 할 수 있다.

src/utils/폴더에 cookies.js를 생성한다.

cookies.js

function saveAuthToCookie(value) {
  document.cookie = `til_auth=${value}`;
}

function saveUserToCookie(value) {
  document.cookie = `til_user=${value}`;
}

function getAuthFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_auth\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function getUserFromCookie() {
  return document.cookie.replace(
    /(?:(?:^|.*;\s*)til_user\s*=\s*([^;]*).*$)|^.*$/,
    '$1',
  );
}

function deleteCookie(value) {
  document.cookie = `${value}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

export {
  saveAuthToCookie,
  saveUserToCookie,
  getAuthFromCookie,
  getUserFromCookie,
  deleteCookie,
};

쿠키에 값을 넣는 것은 기본 document.cookie에 값을 넣어두면 된다.

로그인 시 함수들이 많은 관계로, store의 actions에 LOGIN 함수를 만든 후 로그인시 data를 서버에 보내는 axios 호출과 token값과 username을 저장하는 함수들을 넣어준다.

위에 정의 해놓은 쿠키저장 함수들을 import 한 후, 인증값을 저장하고 username을 저장하는 함수도 호출한다.

store의 username과 token에는 쿠키에서 인증값과 username을 불러오는 것을 붙여준다.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { loginUser } from '@/api/index';
import {
  saveAuthToCookie,
  saveUserToCookie,
  getAuthFromCookie,
  getUserFromCookie,
} from '@/utils/cookies';

// vuex 호출
Vue.use(Vuex);

// vuex의 instance들을 export
export default new Vuex.Store({
  // 여러 component들 사이에 공유되는 데이터
  state: {
    // cookie에 username이 있으면 불러오고 아니면 빈문자열
    username: getUserFromCookie() || '',
    // cookie에 token이 있으면 불러오고 아니면 빈문자열
    token: getAuthFromCookie() || '',
  },
  // state에서 상태가 변경되었을때 계산하는 함수들
  getters: {
    // 만약 state.username이 비어있으면 false, 아니면 true반환
    // state.username으로 login된지 체크
    isLogin(state) {
      return state.username !== '';
    },
  },
  //   state를 바꾸는 역할
  mutations: {
    // state의 username를 넣을 함수
    setUsername(state, username) {
      state.username = username;
    },
    clearUsername(state) {
      state.username = '';
    },
    setToken(state, token) {
      state.token = token;
    },
  },
  actions: {
    async LOGIN({ commit }, userData) {
      const { data } = await loginUser(userData);
      console.log(data.token);
      // store의 token의 데이터 token값을 저장
      commit('setToken', data.token);
      // username을 store의 username에 저장
      commit('setUsername', data.user.username);
      // cookie에 인증값 저장
      saveAuthToCookie(data.token);
      // cookie에 username 저장
      saveUserToCookie(data.user.username);
    },
  },
});

components/LoginForm.vue의 submitForm()함수를 actions 넣어 수정한다.

LoginForm.vue

async submitForm() {
      try {
        // 에러 없이 통과했을때 로직
        const userData = {
          username: this.username,
          password: this.password,
        };
        // LOGIN하는 store의 Action 호출
        // LOGIN에는 서버에서 데이터 받아오는 비동기 호출이 있으므로 await 처리를 한다.
        await this.$store.dispatch('LOGIN', userData);
        //main창으로 이동
        this.$router.push('/main');
        this.resetForm();
      } catch (error) {
        // 에러 생겼을때 로직
        console.log(error.response.data);
        this.logmsg = error.response.data;
      }
    },

쿠키가 잘 들어가 있고 새로고침해도 로그인이 잘 되어있는것을 볼 수 있다.

쿠키 개발자모드에서 확인

Discussion and feedback

← → Top

[Vue.js] 쿠키 사용

쿠키 생성

Login 함수 수정

Discussion and feedback