在哪里放置代码以在Vue.js中设置Firebase身份验证状态持久性? [英] Where to place code to set Firebase auth state persistence in Vue.js?

问题描述

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

I'm building a web app in Quasar/Vue.js and Firebase which needs to authenticate users.

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

A pretty common feature - keep users logged even after they close the browser/tab.

我知道我可以使用 localStorage 或 cookies 设置用户身份验证状态.但是，我想允许Firebase身份验证为我完成(如果可以的话).

I'm aware that I can use localStorage or cookies to set the user auth state. However, I want to allow Firebase auth do it for me (if it can do it).

我在这方面检查了文档- https://firebase.google.com/docs/auth/web/auth-state-persistence 而且它们很好，除了我无法弄清楚此处提到的这段代码的位置:

I checked the docs in this regard - https://firebase.google.com/docs/auth/web/auth-state-persistence and they're nice, except I cannot figure out where to place this piece of code mentioned there:

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;
  });

我不确定将其放置在以下位置之外的地方:

I'm not sure where to place it out of the following places:

• 使用 onAuthStatechanged 侦听器?
• 在App.vue(根Vue)实例中?
• 其他地方?

如果有人可以提供帮助，我们将非常高兴.谢谢.

Would be glad if anyone could help out. Thanks.

推荐答案

只要有 firebase.initializeApp()，我就会在任何地方进行.例如

I'd do it wherever you have firebase.initializeApp(). Eg

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

export const auth = firebase.auth()

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

请注意， LOCAL 是Web应用程序中的默认设置.

Note that LOCAL is the default in web apps already.

您真的不需要等待那个承诺.从文档

You don't really need to wait for that promise. From the docs

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

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.

这篇关于在哪里放置代码以在Vue.js中设置Firebase身份验证状态持久性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！