로그인 시 user 정보 쿠키에 담기

sdsdsrd·2020년 11월 15일
0

졸업프로젝트

목록 보기
12/15

1. 쿠키에 값 저장하기

1. @/utils/cookies.js

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

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

function saveUserNameToCookie(value) {
	document.cookie = `username=${value}`;
}

export { saveAuthToCookie, saveUserToCookie, saveUserNameToCookie };

2. @/store/index.js

...
export default new Vuex.Store({
	state: {
		userId: getUserFromCookie() || '',
		token: getAuthFromCookie() || '',
          ...
    	}
        ...

3. @/views/login/SignInPage.vue

<script>
import { signInUser } from '@/api/auth';
import {
	saveAuthToCookie,
	saveUserToCookie,
	saveUserNameToCookie,
} from '@/utils/cookies';

export default {
  ...
  methods: {
    async submitForm() {
      try {
        const userData = {
          header: {
            name: 'SignInRequest',
            userId: this.id,
          },
          payload: {
            userId: this.id,
            password: this.password,
            deviceToken: this.deviceToken,
          },
        };
        const { data } = await signInUser(userData);
        this.$store.commit('SET_TOKEN', data.payload.token);
        this.$store.commit('SET_USERID', data.header.message);
        saveAuthToCookie(data.payload.token);
        saveUserToCookie(data.header.message);
        saveUserNameToCookie(data.payload.userName);
        this.$router.push('/main');

2. 쿠키에서 값 가져오기

1. @/utils/cookies.js

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

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

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

3. 쿠키 삭제

1. @/utils/cookies.js

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

2. @/views/login/SignOutPage.vue

export default {
  ...
  methods: {
    ...
    async logout() {
    const userData = {
    header: {
    name: 'SignOutRequest',
    userId: getUserFromCookie(),
  },
    payload: {
    },
  };
  await signOutUser(userData);
  this.$store.commit('CLEAR_USERID');
  this.$store.commit('CLEAR_TOKEN');
  deleteCookie('auth');
  deleteCookie('user');
  deleteCookie('username');
  this.$router.push('/sign-in');
},
  ...

auth, user, username이라는 쿠키 값을 삭제한다.

0개의 댓글

관련 채용 정보