Speichern des Firebase-Zugriffstokens im Pinia-Store – Vue3

Question

Ich bin ziemlich neu bei Vue und verwende Pinia zum ersten Mal. Ich folge dieser Anleitung zum Einrichten von Firebase, Pinia und Axios. Die App, die ich erstelle, verwendet FirebaseUI, um Benutzern die Anmeldung über einen E-Mail-Link zu ermöglichen – alles geschieht in der LoginPage-Komponente unten:

(Bitte ignorieren Sie alle Variablen/Funktionen des falschen Typs – ich möchte nur, dass es überhaupt funktioniert)

<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>

Wenn sich der Benutzer erfolgreich anmeldet, aktualisiert die Anwendung das Pinia-Store-Benutzerobjekt mithilfe des AuthResult-Rückgabeobjekts der signInSuccessWithAuthResult-Funktion. Beim Debugger sehe ich, dass das gespeicherte Objekt so aussieht:

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

wird gespeichert accessToken. Der Benutzerspeicher ist wie folgt:

import { defineStore } from 'pinia'

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

In der Anwendung habe ich einen Axios-Interceptor eingerichtet, der accessToken an jede von der Anwendung gestellte Axios-Anfrage anhängt:

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

Beim Versuch, accessToken aus dem Benutzerspeicher abzurufen, verschwand es zu diesem Zeitpunkt. Die meisten, wenn nicht alle anderen Eigenschaften im Benutzerobjekt sind noch vorhanden, das Zugriffstoken jedoch nicht, daher bin ich mir ziemlich sicher, dass ich den Speicher richtig verwende:

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

Kann mir jemand erklären, wo ich falsch liege und warum accessToken aus dem Shop entfernt wurde? Es scheint mir, dass ich den Pinia-Shop richtig verwende, und ich bin mir ziemlich sicher, dass der Abfangjäger auch richtig ist. Möglicherweise speichere ich das Zugriffstoken jedoch falsch. Ich wäre Ihnen sehr dankbar, wenn Sie Hilfe/Ratschläge zur ordnungsgemäßen Einrichtung der Firebase-Authentifizierung mit Vue geben könnten.

Bearbeitet, um vom Benutzer gespeicherte Werte beim Debuggen im Interceptor einzubeziehen.

Answer 1

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