我對 Vue 還很陌生，這是我第一次使用 Pinia。我正在按照本指南設定 Firebase、Pinia 和 Axios。我正在建立的應用程式使用 FirebaseUI 透過電子郵件連結讓使用者登入 - 這一切都發生在下面的 LoginPage 元件中：

（請忽略所有錯誤類型的變數/函數 - 我只是想讓它首先工作）

<script setup lang="ts">
import { onMounted } from "vue";
import { EmailAuthProvider } from "firebase/auth";
import { auth } from "firebaseui";
import { auth as firebaseAuth } from "../firebase/config";
import { useUserStore } from "../stores/user"

onMounted(async () => {
  const uiConfig: auth.Config = {
    signInSuccessUrl: "/",
    signInOptions: [
      {
        provider: EmailAuthProvider.PROVIDER_ID,
        signInMethod: EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
        forceSameDevice: true,
      },
    ],
    callbacks: {
      signInSuccessWithAuthResult: function (authResult) {
        const store = useUserStore();
        store.user = authResult;
        return true;
      },
    },
  };
  const ui = new auth.AuthUI(firebaseAuth);
  ui.start("#firebaseui-auth-container", uiConfig);
});
</script>
<template>
  <div id="firebaseui-auth-container"></div>
</template>

當使用者成功登入時，應用程式會使用 signInSuccessWithAuthResult 函數的 AuthResult 傳回物件更新 Pinia 商店使用者物件。當調試器時，我可以看到存儲的物件如下所示：

{
    additionalUserInfo: {...}
    operationType: "signIn"
    user: {
        accessToken: "eyJhbGciOiJSUzI1N..."
        auth: {...}
        displayName: null
        ...
    }
}

即正在儲存 accessToken。用戶儲存如下：

import { defineStore } from 'pinia'

export const useUserStore = defineStore("userStore", {
  state: () => ({
    user: null as any
  }),
  getters: {
    getUser(state) {
      return state.user
    }
  }
})

在應用程式中，我設定了一個 axios 攔截器，它將 accessToken 附加到應用程式發出的任何 Axios 請求：

axiosInstance.interceptors.request.use((config) => {
  const userStore = useUserStore();
  
  if (userStore) {
    debugger;
    // accessToken is undefined
    config.headers.Authorization = 'Bearer ' + userStore.user.user.accessToken;
  }
  return config;
});

此時嘗試從使用者儲存中檢索 accessToken 時，它消失了。使用者物件中的大多數（如果不是全部）其他屬性仍然存在，但存取令牌不存在，因此我很確定我正確使用了儲存：

{
    additionalUserInfo: {...}
    credential: null
    operationType: "signIn"
    user: {
        // accessToken is gone
        apiKey: "..."
        appName: "[DEFAULT]"
        email: "..."
        emailVerified: true
        ....
    }
}

任何人都可以解釋我哪裡出了問題，以及為什麼 accessToken 被從商店中刪除？在我看來，我似乎正確使用了 Pinia 商店，我很確定攔截器也是正確的。然而，我可能會以錯誤的方式儲存存取權杖。如果您能提供有關如何使用 Vue 正確設定 Firebase 身份驗證的協助/建議，我將不勝感激。

編輯為在攔截器內調試時包含使用者儲存的值。