Vue-(15) vue 쿠키 및 데이터전달

Email Validation 정규 표현식 코드

• 아래 링크를 통해 코드 참고
• https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

컴포넌트 간 데이터 전달 방법 3가지

• props&emit(단방향 데이터 흐름), eventbus와 store
• 로그인 페이지에 있는 정보를 AppHeader로 보내기 위한 방법
• 여러가지 컴포넌트로 구성되어 있을때 store로 구현하는게 데이터를 관리하기 쉬움
• 인증값도 store에서 관리하는게 보다 쉬움
• vuex 설치 -> npm i vuex

depencies와 devDependencies의 차이점

• 두개 모두 package.json에 있음
• depencies : 애플리케이션 로직과 관련된 라이브러리 목록 -> npm run build 로 설치 가능
• devDependencies : 본 라이브러리는 배포할 때 포함되지 않음

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

• JSON Web Token
• Authorization 토큰값으로 API인증을 받는 방법
• axios.interceptors

Json web 토큰 문서

• 참고 링크 : https://jwt.io/

토큰값을 API Header에 저장하기 위한 방법

• 액시오스(axios) 인터셉터
• https://github.com/axios/axios#interceptors
• 아래 코드를 특정

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

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

-쿠키를 이용한 로그인 인증값 저장

• actions를 이용한 컴포넌트 로직 정리

쿠키를 사용하는 이유

• 본래 로그인을 하고 난 후, 토큰값이 다음과 같이 저장되어 있었습니다.
• token: ‘eyJhbGciOiJIUzI1NiIsI4cw3poCI0PmGPWLwTNtKSVhTjo’ 이런식으로 토큰이 자바스크립트 내에 저장되어 있었습니다.
• 그러나, 웹페이지상에서 새로고침(F5)을 하면 토큰값이 초기화 되어서 token: ‘’ 됩니다.
• 이를 해결하기 위해 쿠키에 토큰값을 저장합니다.
• 아래 코드를 통해 쿠키에 토큰값(token)과 사용자명(username)을 저장하게 됩니다.
• 쿠키를 확인하기 위해서는 웹페이지상에서 F12를 누르고, Application을 클릭하고 Cookies 탭에서 http://localhost:8080을 클릭하면 저장된 쿠키내용을 볼 수 있습니다.
• localstorage를 통해 저장할 수 있지만, localstorage는 만료기한 설정이 없음 (쿠키는 만료기한 설정 있음)

// utils 폴더 안에 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,
};

// utils 폴더 안에 cookies.js 파일을 import하고 쿠키에 토큰값(token)과 사용자명(username)을 저장합니다.
import { saveAuthToCookie, saveUserToCookie } from '@/utils/cookies';

saveAuthToCookie(data.token);
saveUserToCookie(data.user.username);

브라우저 저장소로 인증값 보존하기 위한 방법

• store가 실행 될때마다 Auth,User 쿠키를 가져오거나, 쿠키가 없으면 ‘‘로 처리합니다.

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

Dynamic Rout Matching

• 라우트에 path를 정의할 때, 파라미터로 받아서 해당 페이지로 진입했을 때 접근할 수 있는 형태
• :id 패턴으로 정의됩니다.
• 아래 코드는 Dynamic Rout Matching과 관련된 예시 코드입니다.

  const router = new VueRouter({
    routes: [
        //dynamic segments start with a colon
        { path: '/user/:id', component: User }
    ]
  })
  

라우터 네비게이션 가드란?

• 로그인을 하지 않은 특정 사용자가 http://localhost:8080/main 으로 페이지 이동시에 로그인 하지 않았는데도 페이지로 이동할 때 에러가 발생하는 현상을 해결하기 위한 것
• 데이터를 받아왔을 때만 호출하고 로딩하는 코드로 구성되기도 함
• 아래는 라우터 네비게이션 가드 문서 참고 링크입니다.
• https://router.vuejs.org/guide/advanced/navigation-guards.html

Jest

• 테스트를 위한 자바스크립트 라이브러리
• 사용 이유 : 테스트 코드는 일일이 기능을 손으로 확인하는 시간을 줄여줍니다
• 아래 링크를 통해 Jest가 얼마나 활용도가 높고 얼마나 잘 사용되고 있는지를 알 수 있습니다
• 2019.stateofjs.com/testing/
• jestjs.io/docs/en/getting-started “@vue/test-utils”: “^1.0.3”,”@vue/cli-plugin-unit-jest”: “~4.5.0”를 통해 라이브러리 설정 가능
  
• describe() : 연관된 테스트 케이스를 그룹화하는 API
• .eslintrc.js에서 env에 jest: true를 작성하면 엑박이 뜨지 않습니다.
• 프로젝트 폴더에서 npm t 로 테스트를 진행합니다.
• 아래 1번과 2번 로직으로 테스트 가능
  1. id 인풋박스에 이메일을 입력했을 때 이메일이 맞는지 확인하는 로직
     
  2. id, pw가 맞는 경우에 로그인 처리가 된다. 다음 페이지로 이동
     

Vue Test Utils

• 공식 유닛 테스팅 라이브러리
  
• https://vue-test-utils.vuejs.org/guides/
  

페이지별 (특정 페이지) 인증 권한 설정??

아이콘 추천 사이트

• 아이오닉 아이콘 사이트(https://ionicons.com/usage/)
  
• 상단 헤더에 Usage -> Basic usage를 참고할 것