Vue.js+Firebase Firestore：权限变更后写入失败的认证配置方案

前提准备 #

1. 先在 Firebase 控制台开启对应认证方式：
   • 进入 Firebase 控制台 -> 目标项目 -> 左侧「Authentication」->「Sign-in method」
   • 启用需要的登录方式（如匿名登录、邮箱密码登录）并保存设置

步骤1：完善 Firebase 配置文件 #

修改项目中的 Firebase 初始化文件（如src/firebase/config.js），导入并初始化认证模块：

import { initializeApp } from "firebase/app";
import { getFirestore, onSnapshot, doc, updateDoc } from "firebase/firestore";
import { getAuth, signInWithEmailAndPassword, signInAnonymously, onAuthStateChanged } from "firebase/auth";

// 从 Firebase 控制台复制的项目配置信息
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化 Firebase 服务实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app); // 初始化认证实例

// 导出供组件调用
export { db, auth, signInWithEmailAndPassword, signInAnonymously, onAuthStateChanged };

步骤2：实现用户认证 #

根据业务需求选择以下一种登录方案：

方案A：匿名登录（快速测试用） #

无需用户输入账号密码，直接通过 Firebase 匿名认证获取权限：

import { auth, signInAnonymously } from '@/firebase/config';

// 执行匿名登录
async function loginAnonymously() {
  try {
    await signInAnonymously(auth);
    console.log('匿名登录成功，已获取写入权限');
  } catch (error) {
    console.error('匿名登录失败:', error.message);
  }
}

// 组件挂载时自动触发登录（可选）
onMounted(() => {
  loginAnonymously();
});

方案B：邮箱密码登录 #

适合需要用户账号的场景，先在 Firebase 控制台创建测试用户，再在组件中实现登录逻辑：

import { auth, signInWithEmailAndPassword } from '@/firebase/config';

// 邮箱密码登录方法
async function loginWithEmail(email, password) {
  try {
    await signInWithEmailAndPassword(auth, email, password);
    console.log('登录成功，已获取写入权限');
  } catch (error) {
    console.error('登录失败:', error.message);
  }
}

// 示例：绑定表单提交事件
function handleLoginSubmit() {
  const email = 'test@example.com'; // 替换为实际用户邮箱
  const password = 'test123'; // 替换为实际用户密码
  loginWithEmail(email, password);
}

步骤3：确保写入操作在认证后执行 #

监听用户认证状态，仅当用户登录成功后才执行 Firestore 写入操作，修改你的更新代码：

import { auth, db, updateDoc, doc } from '@/firebase/config';
import { onAuthStateChanged } from "firebase/auth";

let currentUser = null;

// 监听用户认证状态变化
onAuthStateChanged(auth, (user) => {
  currentUser = user;
});

// 修改后的更新数据方法
async function updateData(appConfig, updatedData) {
  // 检查用户是否已登录
  if (!currentUser) {
    toast.add({
      severity: "error",
      summary: "Error",
      detail: "请先登录以获取写入权限",
      life: 3000,
    });
    return;
  }

  try {
    const docRef = doc(db, appConfig, appConfig.id);
    await updateDoc(docRef, updatedData);
    toast.add({
      severity: "success",
      summary: "Successful",
      detail: `Data saved successfully`,
      life: 3000,
    });
  } catch (error) {
    toast.add({
      severity: "error",
      summary: "Error",
      detail: `Failed to save data: ${error.message}`,
      life: 3000,
    });
  }
}

关键说明 #

Firestore 规则allow write: if request.auth != null;要求只有已完成认证的用户才能执行写入操作，因此必须满足两个条件：

1. 用户完成登录流程，request.auth不为空
2. 写入操作在用户登录状态确认后执行

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