Firebase × Vue.jsでRepo.ts:857 Uncaught (in promise) Error:Permission denied


# はじめに

Firebase × Vue.jsでアプリを作っていたら、データが登録できなくて焦ったが解決した。

# 環境の情報
OS
macOS Big Sur 11.3

# 注意
最新の状態を確認して下さい。

# 参考さまはこちら
https://tanaken.me/web/791/

# 最終更新日
2023年7月12日

# 環境


### nodeなど

```
$ node -v
v18.0.0
```

```
$ npm -v
8.6.0
```


# 状況
index.htmlで以下のように書くも特に登録されない。
表示に問題はない。
コマンドにエラーはない。
クリックはできるが無言。


```
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-analytics.js";
import { getDatabase, ref, set, onValue, push } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-database.js";

        const firebaseConfig = {
            apiKey: "自分の値",
            authDomain: "自分の値",
            projectId: "自分の値",
             storageBucket: "自分の値",
            messagingSenderId: "自分の値",
             appId: "自分の値",
            measurementId: "自分の値"
        };

        const app = initializeApp(firebaseConfig);
        const database = getDatabase(app);
        const analytics = getAnalytics(app);

        Vue.component('board-list', {
            template: '<li class="board-list"><div class="board-list__upper">名前:{{name}}{{date}}</div>{{message}}</li>',
            props: ['name', 'message', 'date', 'id'],
        })

        Vue.component('board-form', {
            template: '<div class="form-area">名前 : <input v-model="name"> </br>コメント: \
    <textarea v-model="message"></textarea> </br><button v-on:click="doAdd">書き込む</button></div>',
            data: function () {
                return {
                    message: '',
                    name: ''
                }
            },
            methods: {
                doAdd: function () {
                    this.$emit('input', this.name, this.message)
                    this.message = ''
                    this.name = ''
                }
            }
        })

        var board = new Vue({
            el: '#board',
            data: {
                lists: []
            },
            created: function () {
                var vue = this;
                const starCountRef = ref(database, 'board');
                onValue(starCountRef, (snapshot) => {
                    vue.lists = snapshot.val();
                    console.log(snapshot.val())
                });
            },
            methods: {
                doAdd: function (name, message) {
                    var now = new Date();
                    push(ref(database, 'board'), {
                        name: name,
                        message: message,
                        date: now.getMonth() + 1 + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分'
                    });
                }
            }
        })
    </script>
</head>
<body>
    <div id="board">
        <h2 class="board-title">掲示板</h2>
        <ul class="lists" style="list-style-type: none">
            <board-list v-for="(list, key) in lists" :key="key" :name="list.name" :message="list.message"
                :date="list.date">
            </board-list>
        </ul>
        <board-form v-on:input="doAdd"></board-form>
    </div>
</body>
</html>
```








# 盲点

ブラウザのコンソールから。

```
Repo.ts:857 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
```


# 書き込み等権限

こちらへ変える必要があった。
Firebaseの方の設定でした。


![スクリーンショット 2023-07-12 9.49.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/96292d91-ef63-901d-09f9-f9312f9ce409.png)


```
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```


# 終わり

登録できるようになったよ！やったね！