vue+firebaseにて詰まった部分 v1.2.0

# 初めに
こちらの記事を元に色々と試していきます。

「Vue.js + Firebase を使って爆速でユーザ認証を実装する」
https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241

個人的に色々と細かい部分で詰まるためここに書き記す。



# 問題
## コピペしたのにうまく動かない
`vue`ではjavascriptやhtmlより記載方法が厳しいらしく、怒られる事がよくある。
とりあえず下記の二種類が発生。

### 最後に空の改行コードが必要
javascript部分で、最後に改行コードが無いと怒られる。
追加すると解決します。

### 空白を入れるなと怒られる
html部分で、空白が入っているのを怒られる。
削除すると解決します。

### 色々細かいエラーの根本(ESLintが有効)

怒られるのはVue.js環境構築時に`ESLint`を有効にしてしまっているためだと思われます！
`※[ESLint]はコーディング規則を細かく注意してくれる静的解析ツールのようです。(スペースはこう書いたほうが綺麗だよ！みたいな話を注意してくれます)`



```
? Project name test
? Project description A Vue.js project
? Author hashito <xxxxx@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) <-これをnoに！
```
初回、環境構築時に注意してください！


## `firebaseConfig`の取得
当初、各ページからコピペしていたが、そもそも下記のような手順で手に入れるものらしい。
・FirebaseでJavaScript プロジェクトを作成
・作成するとコピペページが出てくる

参考：
https://firebase.google.com/docs/web/setup?authuser=0

## `firebaseConfig`の場所
この情報はコンパイル時にコンパイルしてしまったり、サーバサイドで保持するものなのか不安でした。 

```
export const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxx",
    databaseURL: "https://xxxx.firebaseio.com",
    projectId: "xxxx",
    storageBucket: "xxxx.appspot.com",
    messagingSenderId: "xxxx",
    appId: "1:xxxxxxxxxxx"
  };
```

https://fir-ui-demo-84a6c.firebaseapp.com/
こちらのソースコードをみるとconfig.jsも公開しているようなので大丈夫な様子。

## 複数回firebaseをimportするとうまく動作しない
色々と作っていくとWEB画面が真っ白になって、うまく動作しないことがある。
consoleを確認すると下記のようなエラーが出ている。

```console
Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

```

原因は複数回`initializeApp`を呼び出している事らしい。
下記のような中間ファイルを作ってこちらを毎回呼び出せば解決します。

```javascript:firebase.js
import * as firebase from "firebase";
import "firebase/firestore"
import {firebaseConfig} from '../config.jsx';
!firebase.apps.length?firebase.initializeApp(firebaseConfig):firebase.app();
export default firebase
```

```javascript:呼び出し側
import firebase from '../firebase'
```

## 権限の問題でFirestoreにアクセスできない
ブラウザ上で、DBへの書き込み・読み込みのテストをすると、失敗します。
consoleを確認すると下記のようなエラーが出ている。

```console
Error adding document: FirebaseError: Missing or insufficient permissions.

```
原因はFirebaseのdatabaseのアクセスルールが全拒否になっている。
しかし…私は2段階で間違えていたのでこちらも記載しておきます。

### （1）`Firestore`は`database`であり`storage`とは別物
表記の通りで、私は懸命に`storage`側の設定を変更していました。
ただしくは`database`の設定変更が必要です

<img width="1149" alt="スクリーンショット 2019-09-22 16.04.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/7aedd0b3-1034-359f-da3f-5877bf12826e.png">

### （2） GCP（GoogleCloudPlatform）と連携している場合にそちら側の有効化が必要
`firebase`で`database`にアクセスしてみると分かるのですが、そちらの有効化が必要です。

<img width="548" alt="スクリーンショット 2019-09-22 16.16.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/a795d1ad-0a29-dd0f-32d2-19d6729e63a6.png">


### （３） 権限の問題でFirestoreにアクセスできない（本題）
こちらは公式の方でも切々と書いてあるので分かるかと思うのですが。
`database`の`ルール`のタブで権限を変更する必要があります。

<img width="1109" alt="スクリーンショット 2019-09-22 16.05.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/4b3cc372-cb51-4c03-36bd-68440475d842.png">


オール許可にすると許可のないユーザでもバシバシ来るっぽいので気をつけてください
各バージョンで変わりそうですが…参考に下記に記載しておきます。


```全許可
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```

```全拒否
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
参考：[Cloud Firestore セキュリティ ルールを使ってみる](https://firebase.google.com/docs/firestore/security/get-started?hl=ja)


## `vue-cli`環境でコンパイルに失敗する
環境構築時に`babel`というコンパイルツールを利用していたようです。

こちらのサンプルコードを参照して構築したのですが、ここでコンパイルが通らなくなりました。
参考：[Cloud Firestore を使ってみる:データを読み取る](https://firebase.google.com/docs/firestore/quickstart?hl=ja#read_data)

```javascript:サンプルコード
db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});
```

原因は`babel`の環境設定の問題。
下記のツールを`npm`でインストールした所、解決しました。

```console
npm install --save core-js@2

```

# 懸念点
## ユーザ単位での設定値の操作
## Googleなどの他サービスへの認証方法
今後の課題…

# 最後に
追記していきます…