Je suis assez nouveau sur Vue et c'est la première fois que j'utilise Pinia. Je suis ce guide pour configurer Firebase, Pinia et Axios. L'application que je construis utilise FirebaseUI pour permettre aux utilisateurs de se connecter via un lien de courrier électronique - tout se passe dans le composant LoginPage ci-dessous :

(Veuillez ignorer toutes les variables/fonctions du mauvais type – je veux juste que cela fonctionne en premier lieu)

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

Lorsque l'utilisateur se connecte avec succès, l'application met à jour l'objet utilisateur du magasin Pinia à l'aide de l'objet de retour AuthResult de la fonction signInSuccessWithAuthResult. Lorsque le débogueur, je peux voir que l'objet stocké ressemble à ceci :

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

est stocké accessToken. Le stockage des utilisateurs est le suivant :

import { defineStore } from 'pinia'

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

Dans l'application, j'ai mis en place un intercepteur axios qui ajoute accessToken à toute requête Axios faite par l'application :

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

Lorsque vous avez essayé de récupérer accessToken du stockage utilisateur à ce stade, il a disparu. La plupart, sinon la totalité, des autres propriétés de l'objet utilisateur sont toujours là, mais le jeton d'accès ne l'est pas, donc je suis presque sûr d'utiliser correctement le stockage :

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

Quelqu'un peut-il m'expliquer où je me trompe et pourquoi accessToken a été retiré du magasin ? Il me semble que j'utilise correctement la boutique Pinia, et je suis presque sûr que l'intercepteur est également correct. Cependant, je stocke peut-être le jeton d'accès de la mauvaise manière. Je vous serais très reconnaissant si vous pouviez nous fournir de l'aide/des conseils sur la façon de configurer correctement l'authentification Firebase avec Vue.

Modifié pour inclure la valeur stockée par l'utilisateur lors du débogage dans l'intercepteur.