在 Pinia 商店中存储 Firebase accessToken - Vue3

Question

我是 Vue 的新手，这是我第一次使用 Pinia。我正在关注 this guide 以设置 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>

当用户成功登录时，应用程序更新 Pinia 商店用户对象，使用 AuthResult 从 signInSuccessWithAuthResult 函数返回对象。调试器时，我可以看到正在存储的对象如下所示：

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

IE。 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 身份验证的任何帮助/建议，我将不胜感激。

编辑为在拦截器内部调试时包含用户存储的值。

Answer 1

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

Answer 2

我刚刚结束了与您所处的同一场战斗……IMO 有很多方法可以配置此设置……这类似于您可能在一个地方使用回调，而在另一个地方使用异步等待的原因，这取决于您的项目结构体。

这是一个简单的示例，可以帮助您阐明它。

第一的创建一个 firebase 文件来保存配置，将其放在您的组织习惯要求您放置的位置。请记住，以便我们稍后使用它。

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

//initialize firebase auth
export const auth = getAuth(app);

第二 - userStore

用户商店负责跑腿工作。当我们想从我们的 ui 与 userauth 交互时，我们将使用这些操作。

import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";

import { auth } from "../firebase"; // the file we made above

import router from "../router";

export const useUserStore = defineStore("userStore", {
  state: () => ({
    userData: null,
    loadingUser: false,
    loadingSession: false,
  }),
  actions: {
    async registerUser(email, password) {
      this.loadingUser = true;
      try {
        const { user } = await createUserWithEmailAndPassword(
          auth,
          email,
          password
        );
        this.userData = { email: user.email, uid: user.uid };
        router.push("/");
      } catch (error) {
        console.log(error);
      } finally {
        this.loadingUser = false;
      }
    },
    async loginUser(email, password) {
      this.loadingUser = true;
      try {
        const { user } = await signInWithEmailAndPassword(
          auth,
          email,
          password
        );
        this.userData = { email: user.email, uid: user.uid };
        router.push("/");
      } catch (error) {
        console.log(error);
      } finally {
        this.loadingUser = false;
      }
    },
    async logOutUser() {
      try {
        await signOut(auth);
        this.userData = null;
        router.push("/login");
      } catch (error) {
        console.log(error);
      }
    },
    currentUser() {
      return new Promise((resolve, reject) => {
        const unsuscribe = onAuthStateChanged(
          auth,
          (user) => {
            if (user) {
              this.userData = { email: user.email, password: user.password };
            } else {
              this.userData = null;
            }
            resolve(user);
          },
          (e) => reject(e)
        );
        unsuscribe();
      });
    },
  },
});

*** step3 在 vue 中设置登录/注册组件。 ***

  <div>
    <form @submit.prevent="login">
      <label>
        Email:
        <input type="email" v-model="email" required />
      </label>
      <br />
      <label>
        Password:
        <input type="password" v-model="password" required />
      </label>
      <br />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { useUserStore } from "../stores/user";
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    async login() {
      try {
        await this.userStore.loginUser(this.email, this.password);  // 
      } catch (error) {
        console.error(error);
      }
    },
  },

// because of below setup you can access this.userStore() singleton 

  setup() {  
    const userStore = useUserStore();
    return {
      userStore,
    };
  },
};
</script>

注册将是相似的

  <div>
    <form @submit.prevent="register">
      <label>
        Email:

        <input type="email" v-model="email" required />
      </label>
      <br />
      <label>
        Password:
        <input type="password" v-model="password" required />
      </label>
      <br />
      <button type="submit">Register</button>
    </form>
  </div>
</template>
<script>
import { useUserStore } from "../stores/user";
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    async register() {
      try {
        await this.userStore.registerUser(this.email, this.password);
      } catch (error) {
        console.error(error);
      }
    },
  },
  setup() {
    const userStore = useUserStore();
    return {
      userStore,
    };
  },
};
</script>