Vue、Ponia、Firebase 認証を使用してルート ガードの前に現在のユーザー情報を取得する

Question

最近、Vue 3 プロジェクトでグローバル ストレージとして Pinia を使用し始めました。ユーザー認証に Firebase を使用しており、Vue が初期化される前に現在のユーザーをロードしようとしています。理想的には、認証に関連するものはすべて、Pinia ストアを使用して別のファイルに保存する必要があります。残念ながら (Vuex とは異なり)、アクションを使用するには、Vue インスタンス の前に Pinia インスタンスを 渡す必要があり、それが問題だと思います。最初のロード時、ストレージ内の user オブジェクトは一時的に空になります。

これは、auth.js でユーザー (新しい Firebase Web v9 ベータ版を使用) をバインドする保存されたアクションです:

リーリー

これは私の main.js ファイルです:

リーリー

他に何かが起こる前にユーザーを設定するにはどうすればよいですか?

Answer 1

I figured it out. Had to register the router after the async stuff

//main.js
(async () => {
  const app = createApp(App);

  app.use(createPinia());
  const { bindUser } = useAuth();
  await bindUser();

  app.use(router);
  app.mount("#app");
})();