Vue.js 끝내기 No.11(Cookies, 중간리뷰)

새로고침을 누르면 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서

게시판을 계속 볼 수 없는 노인증상태가 되므로 그 정보를 cookie에 저장해야한다.

 

utils/cookie.js 

function saveAuthToCookie(value) { // 토큰 값을 쿠키에 셋팅
  document.cookie = `til_auth=${value}`;
}

function saveUserToCookie(value) { // username 값을 쿠키에 싯팅
  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,
};

이걸로 Login시 Cookie에 저장 

state에서는 Cookie에 있는 값을 가져오면 된다. 그럼 Login정보가 유지

store/index.js

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

 

  중간 리뷰  

1.개발환경 설정

• 개발 툴 및 필요 프로그램 설치
• API 서버 프로젝트 클론(몽고디비 클라우드,)

2.Vue CLI 프로젝트 생성

• Prettier, ESLint jsconfig -> 제일 시간 많이걸림..이전에 깔아놓았던 formatting 이 있어서 적용 안됬었음

3.뷰 라우터 및 컴포넌트 설계

• 라우터 링크 , 뷰
• mode:history와 서버 배포시 주의사항-> 서버는 모르니깐 알려줘야하는것
• 코드 스플리팅 component() => import('경로') Lazy Loading 특정 페이지로 이동할 때 그때 그 페이지의 자원을 갖고옴 원래는 import해서 이미 페이지를 갖고 있는 상태였었다.

4. 회원 가입 페이지 개발

• 폼처리 -> 폼 component화
• async & await 
• axios
• swagger API 문서 보는 방법

5.실무 환경 구성

• axios.create() -> 공통 인스턴스화(기본 경로 설정등등) VUE_ 로 시작되는 건 앱 실행시 자동 인식
• env 파일 설정 방법 -> 개발,배포버전 스위칭
• Vue CLI 버전 3이상에서의 env 파일 규칙

6.로그인 페이지 개발

• 사용자 폼 처리 기능 구현
• async & await 에러 처리 방법
• 사용자 폼 유효성 검사 (Email형식이랑 비밀번호 입력했는지 check)

7.로그인 상태 관리

• 뷰 엑스를 이용한 사용자 아이디 관리 -> state,getters,mutations,actions
• this.$router.push('/main') -> 이거 순서조심 비동기로 로직 처리 순서 확실하게!

8.API 인증 처리를 위한 토큰 관리

• JSON Web Token -> 토큰 형식
• Authorization 토큰 값으로 API 인증을 받는 방법(HTTP의 Header에 authorized ? 속성에 값 실기 )
• axios.interceptors -> request시 요청을 가로채서 인증값을 넣어주는 로직

9.학습 노드 데이터 조회

• 학습 노트 목록 표시 기능
• 목록 아이템 컴포넌트화
• 스피너를 이용한 데이터 로딩 상태 표시 -> isLoading 을 이용해서 

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

• 쿠키를 이용한 로그인 인증 값 저장
• actions를 이용한 컴포너틑 로직 정리

11.학습 노트 데이터 생성

• 학습 노트 생성 기능 구현
• 학습 노트 본문 길이 유효성 검사