如何在Firebase函数外使用User对象并传递到Pug模板渲染？

核心逻辑：你当前获取的user对象仅存在于前端浏览器内存中，后端Express服务无法直接访问，需要通过token校验+会话存储+全局模板变量的方式实现全Pug模板可用。

步骤1：修改前端登录逻辑，向后端传递身份凭证 #

登录成功后调用Firebase提供的getIdToken()方法获取身份令牌，发送给后端校验，校验通过后再跳转页面：

document.getElementById('LogInButton').addEventListener('click', (e) => {
  signInWithPopup(auth, provider)
    .then(async (result) => {
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;
      const user = result.user;
      // 新增：获取ID token发送给后端
      const idToken = await user.getIdToken();
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ idToken })
      });
      if (res.ok) {
        window.setTimeout(() => {
          location.assign('/dashboard');
        }, 1500);
      }
    })
    .catch((error) => {
      // 原有错误处理逻辑不变
    });
});

步骤2：后端集成Firebase Admin SDK校验身份 #

首先安装Firebase Admin依赖：
npm install firebase-admin
初始化Admin SDK（可放在项目根目录的firebaseAdmin.js中）：

const admin = require('firebase-admin');
// 从Firebase控制台获取服务账号密钥文件引入
const serviceAccount = require('./path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

module.exports = admin;

步骤3：后端新增身份校验接口与全局中间件 #

3.1 新增登录校验接口 #

配置express-session依赖用于存储用户会话：
npm install express-session
在你的路由文件中新增接口：

const admin = require('./firebaseAdmin');
const session = require('express-session');
// 先配置session中间件
app.use(session({
  secret: '你的自定义会话加密密钥',
  resave: false,
  saveUninitialized: false,
  cookie: { secure: process.env.NODE_ENV === 'production' }
}));

// 登录校验接口
app.post('/api/auth/login', async (req, res) => {
  const { idToken } = req.body;
  try {
    // 校验token合法性
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    const uid = decodedToken.uid;
    // 获取用户完整信息存入session
    const userRecord = await admin.auth().getUser(uid);
    req.session.user = {
      uid: userRecord.uid,
      email: userRecord.email,
      displayName: userRecord.displayName,
      photoURL: userRecord.photoURL
    };
    res.sendStatus(200);
  } catch (error) {
    res.sendStatus(401);
  }
});

3.2 新增全局模板变量中间件 #

在所有路由之前加这个中间件，将用户信息挂载到模板全局变量：

app.use((req, res, next) => {
  // res.locals下的变量所有Pug模板可直接访问
  res.locals.user = req.session.user || null;
  next();
});

步骤4：Pug模板直接使用user变量 #

现在所有.pug文件中都可以直接调用user的属性，示例：

if user
  p 欢迎登录，#{user.displayName}
  img(src=user.photoURL, alt="用户头像")
  a(href="/logout") 退出登录
else
  a(href="/signin") 去登录

不需要修改你现有的viewController中的任何渲染逻辑，变量已经全局生效。

补充说明 #

• 退出登录时只需销毁req.session即可清空全局user变量
• 若不需要服务端渲染用户信息，也可以直接在前端引入Firebase客户端SDK，调用onAuthStateChanged监听登录状态后动态渲染页面

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