如何在 Vuex4 中正确使用 firebase firestore 的 onSnapshot？

Question

I try to use firebase firestore in my latest vue3.js webapps. I have used vuex4 as sate management in my apps. My apps also use firebase authentication as login, logout, and make new users.

My apps use snapShot function after login, but an error occurred like below.

Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.

But I have made the code unsubscribe onSnapshot function after logout event. My code is like below:

store/index.js

const store = createStore({
 state: {
  unsubscribe: null,
 },
 actions: {
  startListner(context) {
   context.state.unsubscribe = onSnapshot(
      //something result get proccess
   )
  },
  stopPostsListner(context) {
      context.state.unsubscribe();
    },
 }
})

I made onSnapshot function as vuex actions methods. And then use these functions at index.vue.

index.vue

<script setup>
import { useStore } from "vuex";
import { onMounted, onUnmounted } from "vue";
const store = useStore();

onMounted(() => {
  store.dispatch("startPostsListner");
});
onUnmounted(() => {
  store.dispatch("stopPostsListner");
});
</script>

I thought onSnapshot function unsubscribe after destroying the component, but errors keep occurring.

How correctly way to use onSnapshot in vuex4?

Answer 1

Posting my comment as an answer for better visibility.

From the security rules by changing:

allow read, write: if

from false; to true; will help to fix the error.