Vue 웹앱 프로젝트_13

## Vue 웹앱 프로젝트_13

---

- 기술참조 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 폴더에 설치해 준다.)

---

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

- emailVerified: false 를 true로 처리 -> firebase Admin 기능으로 대체

```
 cd functions
 firebase functions:config:set admin.email=kimilguk@knou.ac.kr
 firebase functions:config:get > .runtimeconfig.json // 로컬 노드js서버에서 필요
```

- functions/index.js -> const admin = require('firebase-admin')

```
// 트리거 생성
exports.createUser = functions.auth.user().onCreate(user => {
  const set = { level: 2 }
  if (functions.config().admin.email === user.email && user.emailVerified) {
    set.level = 0
  }
  admin.auth().setCustomUserClaims(user.uid, set).then(() => {
    //  새로운 사용자 지정 클레임은 다음에 새 토큰이 발급 될 때 사용자의 ID 토큰으로 전파됩니다.
  })
```

- 사용자 지정 권한을 클라이언트 로그인 토큰(claims)으로 확인 해 보기: jwt.io 에서 토큰 내용 확인(아래)

- 사용자 지정 권한을 클라이언트에서 claims 값으로 가져오기.(아래)

- 작업예정: 사용자 지정 권한을 노드서버API에서 claims 값으로 가져오기.(아래)