在哪里放置代码以在 Vue.js 中设置 Firebase 身份验证状态持久性？

Question

概述

我正在 Quasar/Vue.js 和 Firebase 中构建一个需要对用户进行身份验证的网络应用程序。

我正在努力实现的目标

一个非常常见的功能 - 即使用户关闭浏览器/选项卡后也保持登录状态。

可能的解决方案

我知道我可以使用 localStorage 或 cookies 来设置用户身份验证状态。但是，我想允许 Firebase 身份验证为我做这件事（如果可以的话）。

我检查了这方面的文档 - https://firebase.google.com/docs/auth/web/auth-state-persistence 他们很好，除了我不知道在哪里放置提到的这段代码：

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
  .then(function() {
    // New sign-in will be persisted with session persistence.
    return firebase.auth().signInWithEmailAndPassword(email, password);
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
  });

我不知道把它放在以下哪个地方：

• 与onAuthStatechanged 监听器？
• 在 App.vue（根 Vue）实例中？
• 其他地方？

如果有人能帮忙，我会很高兴。谢谢。

Answer 1

无论您有firebase.initializeApp()，我都会这样做。例如

firebase.initializeApp({
  // config goes here
});

export const auth = firebase.auth()

auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)

请注意，LOCAL 已经是网络应用程序中的默认设置。

你真的不需要等待那个承诺。来自docs

这将返回一个承诺，一旦状态完成从一种类型的存储复制到另一种类型，该承诺就会解决。 在更改持久性后调用登录方法将等待该持久性更改完成，然后再将其应用于新的身份验证状态。

---

它的模块化版本 (v9+) 如下所示...

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

const app = initializeApp({
  // config goes here
})

export const auth = getAuth(app);

setPersistence(auth, browserLocalPersistence)