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

Question

概述

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

我想要达到的目标

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

可能的解决方案

我知道我可以使用 本地存储 或 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已经是 Web 应用程序中的默认设置。
你真的不需要等待那个 promise 。来自 docs

This will return a promise that will resolve once the state finishes copying from one type of storage to the other. Calling a sign-in method after changing persistence will wait for that persistence change to complete before applying it on the new Auth state.

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