在 Pinia 商店中儲存 Firebase accessToken - Vue3
我對 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 身份驗證的協助/建議，我將不勝感激。
編輯為在攔截器內調試時包含使用者儲存的值。
