我对 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 身份验证的帮助/建议，我将不胜感激。
编辑为在拦截器内调试时包含用户存储的值。
