在 Pinia 商店中存储 Firebase accessToken - Vue3

Question

我对 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 身份验证的帮助/建议，我将不胜感激。

编辑为在拦截器内调试时包含用户存储的值。

Answer 1

看起来accessToken可能在userStore.user.user.accessToken中？