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

【问题标题】：How do I make a protected webpage/panel with Firebase authentication?如何使用 Firebase 身份验证制作受保护的网页/面板？
【发布时间】：2021-10-26 20:07:34
【问题描述】：

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

【问题讨论】：

标签： javascript firebase web firebase-authentication

【解决方案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;
}

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

【讨论】：

可以以任何方式利用它吗？
@Psuedo 前端代码可能会被逆向工程，只要您的安全规则设置正确，用户可能能够访问 UI，但不能访问 firebase 中的数据
好的，谢谢，将尝试正确设置（秒规则）