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中间件使用之前调用

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

  2. 使用nuxt的serverMiddleware

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 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('<p>12355</p>')
      // 在该中间件中，你甚至可以做渲染拦截，直接send你自定义的数据
      next()
    }

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