Saya agak baru menggunakan Vue dan ini kali pertama saya menggunakan Pinia. Saya mengikuti panduan ini untuk menyediakan Firebase, Pinia dan Axios. Apl yang saya bina menggunakan FirebaseUI untuk membenarkan pengguna log masuk melalui pautan e-mel - semuanya berlaku dalam komponen Halaman Masuk di bawah:

(Sila abaikan mana-mana pembolehubah/fungsi daripada jenis yang salah - Saya hanya mahu ia berfungsi di tempat pertama)

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

Apabila pengguna berjaya log masuk, aplikasi mengemas kini objek pengguna kedai Pinia menggunakan objek kembali AuthResult fungsi signInSuccessWithAuthResult. Apabila penyahpepijat saya dapat melihat objek yang disimpan kelihatan seperti ini:

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

Menyimpan accessToken. Storan pengguna adalah seperti berikut:

import { defineStore } from 'pinia'

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

Dalam aplikasi, saya menyediakan pemintas axios yang melampirkan accessToken kepada mana-mana permintaan Axios yang dibuat oleh aplikasi:

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

Apabila cuba mendapatkan semula accessToken dari storan pengguna pada ketika ini, ia hilang. Kebanyakan, jika tidak semua, sifat lain dalam objek pengguna masih ada, tetapi token akses tidak ada, jadi saya agak pasti saya menggunakan storan dengan betul:

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

Boleh sesiapa jelaskan saya di mana silap saya dan mengapa accessToken dialih keluar dari kedai? Nampaknya saya menggunakan kedai Pinia dengan betul, dan saya agak pasti pemintas itu betul juga. Walau bagaimanapun, saya mungkin menyimpan token akses dengan cara yang salah. Saya amat berterima kasih jika anda boleh memberikan bantuan/nasihat tentang cara menyediakan Pengesahan Firebase dengan Vue dengan betul.

Diedit untuk memasukkan nilai yang disimpan pengguna semasa menyahpepijat di dalam pemintas.