Firebase9中如何管理GoogleAuthProvider、signInWithEmailAndPassword及setPersistence解决刷新登出问题

• 持久化类型选择错误：你当前使用的inMemoryPersistence为内存级存储，认证状态仅保存在页面运行内存中，页面刷新后内存清空，认证状态自然丢失。
• 配置调用顺序错误：setPersistence方法需要在登录操作执行前完成配置，你将其放在登录成功的回调中执行，配置并未对本次登录生效。

1. 选择合适的持久化类型 #

Firebase Auth 提供三种可用的持久化方案，按需选择即可：

• localPersistence：认证状态保存在本地存储，关闭浏览器再重新打开仍会保留，适合需要长期保持登录状态的场景
• sessionPersistence：认证状态保存在会话存储，当前浏览器标签不关闭的情况下刷新页面不会丢失，关闭标签后自动清除
• inMemoryPersistence：仅保存在内存中，刷新即丢失，仅适合临时一次性登录的场景

2. 调整配置调用顺序 #

setPersistence要放在登录逻辑之前执行，你可以选择每次登录前单独配置，也可以全局统一配置一次。

方案A：每次登录前单独配置（适合不同登录方式需要不同持久化规则的场景） #

修改后的Login.vue Google登录逻辑：

import { getAuth, setPersistence, localPersistence, GoogleAuthProvider, signInWithPopup, } from "firebase/auth";

googleSignIn: async function() {
   const auth = getAuth();
   const provider = new GoogleAuthProvider();
   try {
     // 先配置持久化，再执行登录操作
     await setPersistence(auth, localPersistence);
     await signInWithPopup(auth, provider);
     this.$router.push("/");
   } catch (error) {
     // 处理错误提示逻辑
   }
},

邮箱密码登录的signInWithEmailAndPassword逻辑也要做同样的顺序调整，避免邮箱登录也出现刷新登出问题。

方案B：全局统一配置（推荐，所有登录方式共用同一持久化规则） #

在你项目的Firebase初始化文件中添加全局配置，后续所有登录逻辑不需要再单独调用setPersistence：

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

// 你的Firebase项目配置
const firebaseConfig = {
  // apiKey、authDomain等配置项
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
// 全局配置持久化
setPersistence(auth, localPersistence);

export { auth };

额外注意 #

你当前Header.vue代码里的date是拼写错误，应该是data，该错误不影响登录状态，但会导致用户名变量无法正常响应。

内容的提问来源于stack exchange，提问作者ARNON