VueJS dan firebase: Semak sama ada pengguna log masuk selepas muat semula halaman

Question

Saya sedang membangunkan aplikasi web menggunakan Vue 3 dan rangka kerja firebase. Sebagai stroe, saya menggunakan Pinia. Untuk pengesahan saya menggunakan firebase dan setakat ini ia berfungsi dengan baik, pengguna boleh mendaftar dan log masuk. Sebaik sahaja pengguna log masuk, datanya disimpan dalam storan pinia.

Namun, sebaik sahaja pengguna log masuk dan memuat semula halaman, data dalam storan pinia hilang. Jika saya menggunakan fungsi firebase onAuthStateChanged()

Penyelesaian pertama saya ialah memanggil fungsi onAuthStateChanged() setiap kali apl dilancarkan dan kedai pinia diisi dengan data yang diperlukan. Saya telah cuba memanggil fungsi onAuthStateChanged() dalam fail konfigurasi firebase, tetapi kedai pinia belum dimulakan di sana lagi.

Pada titik manakah dalam aplikasi Vue saya perlu memanggil fungsi onAuthStateChanged() supaya pengguna log masuk secara automatik selepas muat semula dan saya boleh menulis data pengguna ke storan Pinia ?

Answer 1

Saya tidak pasti apa yang anda telah cuba, tetapi saya tahu ini akan berkesan. Sudah tentu, anda boleh memindahkan onAuthStateChanged keluar dari kedai anda dan ia masih akan berfungsi. Ingat, anda perlu menggunakan pemerhati atau prop yang dikira untuk menjejak store.user dan mengemas kini UI.

import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth();
onAuthStateChanged(auth, async () => {
  const store = useStore();
  store.setUser();
});


const useStore = defineStore('store', {
  state: () => ({ 
    user: null
  }),
  actions: {
    setUser() {
      // Set user here
      // this.user = ...
    }
  }
});