nuxt express项目中使用中间件(serverMiddleware)

Nuxt，作为一款优秀的基于Vue的服务端渲染（SSR）框架，既可以使用他的服务器渲染模式，也可以打包成静态页面，甚至也可以将其打包未SPA（单页面应用）

使用Nuxt官方模板初始化项目的时候，可选择不同的基于Nodejs的服务端框架，我选用的是Express，其他框架也类似。

Express中有许多的官方或者第三方的中间件，其实也就是渲染页面之前需要做的操作,比如日志记录，cookie解析，url解析，权限认证等等，在Nuxt中，中间件分两种：

• 基于Nodejs或者Express或者自行开发的服务端中间件（serverMiddleware）
• 基于Vue路由，也就是Nuxt渲染页面之前的中间件，可以看作是Vue Router的钩子

服务端中间件的开发使用

默认在 /server/index.js文件中，启动了一个express服务，在start函数中使用了nuxt作为express的中间件，我们自行开发或者使用的中间件有两种方式：

1. 在nuxt中间件使用之前调用

// 需要在nuxt中间件调用前使用，否则页面会在nuxt中间件中渲染出来
app.use((req,res,next)=>{
    console.log(req.headers)
})
app.use(nuxt.render)

2. 使用nuxt的serverMiddleware

// 1.在项目根目录下建一个serverMiddleware的文件夹，再建立 一个auth.js的文件
//auth.js
export default function(req,res,next){
  // console.log(req.headers)
  // res.redirect(301,'https://www.baidu.com')
  // res.status(200).send('
12355
')
  // 在该中间件中，你甚至可以做渲染拦截，直接send你自定义的数据
  next()
}

// 2.在nuxt的配置文件中（nuxt.config.js）调用该中间件
module.exports = {
    serverMiddleware: [
    '@/serverMiddleware/auth'
  ],
}
// 或者可以给路径参数，跟express中是一样的
module.exports = {
    serverMiddleware: [
    {path:'/api', handler:'@/serverMiddleware/auth'}
  ],
}