如何使用 Firebase 身份验证制作受保护的网页/面板？

Question

我想知道我是否可以制作一个受保护的网站，只有通过 firebase 身份验证登录的人才能访问和使用。

Answer 1

是的你可以。 您只需要检查用户是否在页面加载时登录。

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // redirect to login
  }
});

如果用户未登录，则重定向。 那是面向用户的部分。 您应该以只有经过身份验证的用户才能访问您的 Firebase 资源的方式设置安全规则。 我不完全确定您使用的是哪些服务，但让我们以 Firestore 为例：

match /collection/{docs=**} {
  allow read: if request.auth!= null;
}

此规则将只允许登录用户从该集合中读取数据。 这些是基本规则，但您可以编写细化规则，例如用户特定内容等等。