如何在Express中统一传递所有render调用的公共参数

这是Express模板渲染场景下非常典型的重复传参问题，不需要在每个res.render里手动写公共参数，用Express自带的能力加一个简单中间件就能搞定。

核心原理 #

Express 内置的 res.locals 对象就是专门为模板公共变量设计的，这个对象下的所有属性，会在你调用res.render时自动和你传入的页面参数合并，页面手动传入的同名参数优先级更高，不会出现参数冲突问题。

方案1：全局中间件（全量公共参数首选） #

直接在所有业务路由注册之前，加一个全局中间件，把所有页面通用的参数提前挂载到res.locals上即可：

// 注意：这行代码必须写在所有app.get/app.post等路由注册逻辑之前
app.use((req, res, next) => {
  // 登录态公共参数
  res.locals.isLoggedIn = req.session.isLoggedIn
  // 通用导航栏文本、站点公共配置这类全页面通用的内容都可以放这里
  res.locals.commonNav = [
    { name: i18n.__('home'), url: '/' },
    { name: i18n.__('archive'), url: '/archive' },
    { name: i18n.__('about'), url: '/about' }
  ]

  next()
})

加完这个中间件之后，写路由渲染的时候只需要传当前页面独有的参数就行，公共参数完全不用重复写：

// 首页路由
app.get('/', (req, res) => {
  // 只需要传当前页面专属的docTitle，isLoggedIn、commonNav会自动注入
  return res.render('index', {
    docTitle: i18n.__('home')
  })
})

// 关于页路由
app.get('/about', (req, res) => {
  return res.render('about', {
    docTitle: i18n.__('about')
  })
})

方案2：自定义封装render方法（分组公共参数场景适用） #

如果公共参数不是全站点通用，比如后台管理页一套公共参数、前台用户页一套公共参数，可以重写render方法做分层合并：

// 前台路由组使用的中间件
app.use('/front', (req, res, next) => {
  const originRender = res.render
  res.render = function(view, pageParams = {}) {
    const frontCommonParams = {
      isLoggedIn: req.session.isLoggedIn,
      siteName: '我的个人站点'
    }
    // 合并参数，页面参数覆盖公共参数
    return originRender.call(this, view, { ...frontCommonParams, ...pageParams })
  }
  next()
})

// 后台路由组使用的中间件
app.use('/admin', (req, res, next) => {
  const originRender = res.render
  res.render = function(view, pageParams = {}) {
    const adminCommonParams = {
      isAdmin: req.session.isAdmin,
      siteName: '站点管理后台'
    }
    return originRender.call(this, view, { ...adminCommonParams, ...pageParams })
  }
  next()
})

注意：不管用哪种方案，只要保证页面传入的参数和公共参数同名时，页面参数的优先级更高，就不会出现公共参数覆盖页面专属内容的问题。

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