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

Question

概述

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

我想要实现的目标

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

可能的解决方案

我知道我可以使用localStorage或cookie来设置用户身份验证状态。但是，我想允许 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已经是网络应用程序中的默认设置。

你真的不需要等待这个承诺。来自文档

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

其模块化版本（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)