Firebase

npm install firebase

# 本地开发与部署工具
npm install --save-dev firebase-tools

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

import {
  addDoc,
  collection,
  limit,
  onSnapshot,
  orderBy,
  query,
  serverTimestamp,
} from "firebase/firestore";

const posts = collection(db, "posts");

await addDoc(posts, {
  title: "Hello Firebase",
  authorId: auth.currentUser?.uid,
  createdAt: serverTimestamp(),
});

const latestPosts = query(
  posts,
  orderBy("createdAt", "desc"),
  limit(20),
);

const unsubscribe = onSnapshot(latestPosts, (snapshot) => {
  console.log(snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  })));
});

// 页面卸载时调用 unsubscribe()

import {
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from "firebase/auth";

const provider = new GoogleAuthProvider();

export async function login() {
  return signInWithPopup(auth, provider);
}

export async function logout() {
  return signOut(auth);
}

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{postId} {
      allow read: if true;
      allow create: if request.auth != null
        && request.resource.data.authorId == request.auth.uid;
      allow update, delete: if request.auth != null
        && resource.data.authorId == request.auth.uid;
    }
  }
}

npx firebase login
npx firebase init firestore emulators
npx firebase emulators:start

# 测试通过后再部署规则
npx firebase deploy --only firestore:rules