Vue 웹앱 프로젝트_14

## Vue 웹앱 프로젝트_14

---

- 기술참조 Vuejs: https://kr.vuejs.org/v2/guide/components.html
- 기술참조 Vuetify: https://vuetifyjs.com/ko/components/toolbars/
- 기술참조2: Front-end 간단한 게시판 구현 ( VueJs + Vuetify). https://dollvin.tistory.com/61
- 기술참조3: Vue와 Firebase로 모던웹사이트 만들기. https://fkkmemi.github.io/talk/vf-000-intro/
- 기술참조4: 기술참조3의 Git소스. https://github.com/fkkmemi/vf
- 개발언어: VueJs(Javascript 문법 확장판) + Vuetify 버전2.2.11(메이저.마이너.릴리즈)
- 개발환경: VSCode IDE사용, vue create . 사용-(기술참조3의 vuetify 1.5 -> vuetify 2.x 로 작업됨)
- Vue 프로젝트 설치시 vue-router, vuex 선택 이후 모두 default 선택.
- 실행환경: yarn serve = npm run serve (필요: npm i -g yarn)
- 배포환경: 구글파이어베이스 firebase deploy(필요:npm install -g firebase-tools)
- firebase 가이드: https://firebase.google.com/docs/guides?authuser=0
- plugins/axios.js 에서 로컬과 클라우드용 node서버 지정.(firebase functions는 노드js서버 기본설치됨.)
- 결과확인링크: https://covid19-kr.web.app/
- 작업결과소스: https://github.com/miniplugin/vue
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)

---

### 20200420 작업내역(아래)

- firebase Authentication 회원등록을 파이어베이스 DB에 저장 및 삭제연동.

- src/router/index.js : Vue.prototype.\$isFirebaseAuth -> store.state.firebaseLoaded 대신 사용.

```

const levelCheck = (to, from, next) => {
  console.log('store.state.claims', store.state.claims);
  // console.log('store.state.claims.level', store.state.claims.level);
  if (store.state.claims === null) {
    next();
  } else if (store.state.claims.level === undefined) {
    firebase.auth().signOut();
    next('/userProfile');
  } else {
    next();
  }
};

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: levelCheck
  },
  ----------------------

// store.state.firebaseLoaded 인증값이 넘어오려면 시간이 필요
const waitFirebase = () => {
  return new Promise((resolve, reject) => {
    let cnt = 0;
    const tmr = setInterval(() => {
      if (store.state.firebaseLoaded) {
        clearInterval(tmr);
        resolve();
      } else if (cnt++ > 200) {
        clearInterval(tmr);
        PromiseRejectionEvent(Error('파이어베이스 로드가 안되었습니다.'));
      }
    }, 10);
  });
};
router.beforeEach((to, form, next) => {
  Vue.prototype.$Progress.start();
  waitFirebase()
    .then(() => next())
    .catch(e => Vue.prototype.$toasted.global.error(e.message));
});
router.afterEach((to, form) => {
  Vue.prototype.$Progress.finish();
});
```