Firebase项目中能否部署多网页？含管理员数据查看需求

完全不需要新建Firebase项目，同一项目内就能实现所有需求，而且所有页面确实可以共用同一个域名。下面给你拆解具体怎么操作：

1. 复用现有Firebase资源 #

• 直接用已有的Cloud Firestore存储用户提交的数据，不用重新配置数据库
• 借助Firebase Authentication实现管理员登录（如果要自定义凭证，可以用Firebase的自定义令牌功能，或者限定特定邮箱账号的密码登录）
• 域名方面，Firebase Hosting支持把多个页面部署到同一域名，比如把用户提交页放在根目录/，管理员后台放在/admin子路径下

2. 实现管理员自定义凭证登录 #

如果想用自定义凭证（比如内部专属密钥、自定义令牌），可以这么做：

• 用Cloud Functions或者你自己的后端服务，先验证管理员的自定义凭证是否合法，再生成Firebase自定义令牌
• 管理员页面前端调用firebase.auth().signInWithCustomToken(token)完成登录
• 配置Firestore安全规则，只允许认证后的管理员读取数据：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /submissions/{doc} {
        // 限定只有指定管理员UID能读取数据
        allow read: if request.auth != null && request.auth.uid == "你的管理员专属UID";
        allow write: if false; // 管理员后台只做数据展示的话，禁止写入
      }
    }
  }
  

3. 部署多页面到同一域名 #

• 在Firebase Hosting的public目录下创建admin子文件夹，存放管理员页面的HTML、CSS、JS文件
• 修改firebase.json配置，确保路由正确跳转：

  {
    "hosting": {
      "public": "public",
      "rewrites": [
        {
          "source": "/admin/**",
          "destination": "/admin/index.html"
        },
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

• 运行firebase deploy --only hosting完成部署，之后用户访问your-project.web.app是提交页，your-project.web.app/admin就是管理员后台

4. 快速美化管理员页面 #

• 可以用Tailwind CSS、Bootstrap这类UI框架快速搭建美观的界面
• 登录成功后，从Firestore拉取数据并动态渲染成表格/卡片，示例代码：

  // 管理员登录成功后获取并展示数据
  firebase.firestore().collection("submissions").get()
    .then((querySnapshot) => {
      const tableBody = document.getElementById("submissions-table");
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        const row = document.createElement("tr");
        row.innerHTML = `
          <td>${data.name}</td>
          <td>${data.email}</td>
          <td>${new Date(data.submissionDate.toDate()).toLocaleString()}</td>
        `;
        tableBody.appendChild(row);
      });
    });
  

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