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

Posted 2023-02-22

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

【英文标题】：Where to place code to set Firebase auth state persistence in Vue.js?

【发布时间】：2020-09-16 14:40:16

【问题描述】：

概述

我正在 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）实例中？ 其他地方？

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

【参考方案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)

【讨论】：

firebase.auth 在 firebase 版本 9 中似乎不再存在

@kamatheuska 我已经更新了答案以匹配 v9，但迁移起来应该不会太难。文档甚至显示了命名空间与模块 API 的并排比较

不是什么难，而是为用户提供最准确的答案，你不觉得吗？

@kamatheuska 在 *** 上的答案中特定于版本的代码最终肯定会过时。产品文档应始终是规范的事实来源

不确定你的论点是什么或它的目的。我们应该保留已弃用的答案吗？ IMO 你所做的是适当的事情，编辑答案以反映手头问题的当前解决方案。