如何使用Firebase Authentication搭建受权限保护的网页/管理面板

完全可以基于Firebase Authentication搭建带访问权限控制的站点，核心逻辑是「页面加载/接口请求前先校验用户登录状态，未登录用户拦截到登录页」，具体实现分前端侧、服务侧（如果用到云函数/自托管后端）两部分：

1 前端侧基础实现（静态站点/纯前端项目） #

• 第一步：在Firebase控制台启用Authentication服务，配置你需要的登录方式（邮箱密码、谷歌、手机号等均支持），在项目中引入Firebase SDK并完成初始化，示例代码如下：

// 引入Firebase核心和Auth模块
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目ID",
  storageBucket: "你的存储bucket",
  messagingSenderId: "发件人ID",
  appId: "你的appId"
};

// 初始化实例
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

• 第二步：添加全局路由守卫/页面加载校验逻辑，这是核心拦截环节：
  • 如果你用的是单页框架（Vue/React/Angular等），直接在路由守卫中加状态校验，以Vue为例：

  import { onAuthStateChanged } from "firebase/auth";
  
  router.beforeEach((to, from, next) => {
    // 不需要登录的页面（比如登录页、公开介绍页）直接放行
    const publicPages = ['/login'];
    const authRequired = !publicPages.includes(to.path);
  
    onAuthStateChanged(auth, (user) => {
      // 需要登录的页面没有用户信息，跳转到登录页
      if (authRequired && !user) {
        return next('/login');
      }
      // 已登录用户访问登录页，跳转到首页
      if (user && to.path === '/login') {
        return next('/');
      }
      next();
    })
  })
  

  • 如果你用的是纯静态HTML，就在每个需要保护的页面头部加校验逻辑，未登录直接跳转：

  import { onAuthStateChanged } from "firebase/auth";
  onAuthStateChanged(auth, (user) => {
    if (!user) {
      window.location.href = '/login.html';
    }
  });
  

• 第三步：实现登录页逻辑，调用Firebase Auth的登录方法完成身份校验，以下是邮箱密码登录示例：

import { signInWithEmailAndPassword } from "firebase/auth";

// 登录按钮点击事件
async function handleLogin(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    // 登录成功后跳转首页
    window.location.href = '/';
  } catch (error) {
    // 处理登录错误（密码错误、用户不存在等）
    console.log(error.code, error.message);
  }
}

2 服务侧资源保护（如果用到后端接口/云函数） #

如果你的站点有后端服务或者用到Firebase Cloud Functions，不能只靠前端拦截，必须在服务侧也做校验，避免接口被恶意调用：

• 前端请求的时候，把用户的ID Token放到请求头里：

// 请求前先获取当前用户的ID Token
const user = auth.currentUser;
if (user) {
  const idToken = await user.getIdToken();
  // 发起请求的时候带在header里
  fetch('你的接口地址', {
    headers: {
      'Authorization': `Bearer ${idToken}`
    }
  })
}

• 服务侧拿到Token之后调用Firebase Admin SDK校验Token有效性，以下是Node.js云函数的校验逻辑示例：

const admin = require('firebase-admin');
// 先初始化Admin SDK，需要在Firebase控制台下载服务账号密钥
admin.initializeApp();

// 接口校验逻辑
async function validateRequest(req) {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    throw new Error('未授权访问');
  }
  const idToken = authHeader.split('Bearer ')[1];
  try {
    // 校验Token有效性，返回解码后的用户信息
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    return decodedToken;
  } catch (error) {
    throw new Error('Token无效');
  }
}

3 额外安全建议 #

• 不要把敏感数据直接打包到前端静态资源里，即使有前端拦截也可能被爬取，敏感数据必须从后端接口返回，且接口做Token校验
• 可以结合Firebase Security Rules保护Firestore、Storage等资源，直接在规则里判断请求用户的登录状态，以下是Firestore的规则配置示例：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 只有登录用户可以访问数据
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

• 不需要登录的公开资源单独存放，避免不必要的权限校验

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