Firebase accessToken を Pinia ストアに保存する - Vue3

Question

私は Vue をあまり使用したことがなく、Pinia を使用するのはこれが初めてです。このガイドに従って Firebase、Ponia、Axios をセットアップしています。私が構築しているアプリは FirebaseUI を使用して、電子メール リンク経由でユーザーをログインします。これはすべて、以下の LoginPage コンポーネントで行われます。

(間違った型の変数/関数は無視してください。私は最初にそれが機能することを望んでいます)

リーリー

ユーザーがログインに成功すると、アプリケーションは

signInSuccessWithAuthResult 関数の AuthResult 戻りオブジェクトを使用して Pinia ストア ユーザー オブジェクトを更新します。デバッグすると、保存されたオブジェクトが次のようになっていることがわかります: リーリー

つまり、

accessTokenが格納されています。ユーザーストレージは次のとおりです:

リーリー

アプリケーションでは、アプリケーションによって行われたすべての Axios リクエストに

accessToken を追加する axios インターセプターを設定しました。 リーリー

この時点で、ユーザー ストアから

accessToken

を取得しようとすると、それが消えてしまいました。ユーザー オブジェクト内の他のプロパティのすべてではないにしても、ほとんどがまだ存在していますが、アクセス トークンは存在していないため、ストレージを正しく使用していると確信しています。 リーリー 私のどこが間違っているのか、そしてなぜ

accessToken

がストアから削除されたのか説明してくれる人はいますか? Pinia ストアを正しく使用しているように思えます。インターセプターも正しいと確信しています。ただし、アクセス トークンの保存方法が間違っている可能性があります。 Vue で Firebase Authentication を適切に設定する方法についてヘルプやアドバイスを提供していただければ幸いです。

インターセプター内でのデバッグ時にユーザーが保存した値を含めるように編集されました。

Answer 1

accessToken は userStore.user.user.accessToken にあるようですか?