nuxt中间件

nuxt路由中间件

• 路由中间件 (位于 middleware/ 目录)
• 在页面路由跳转前拦截，控制页面是否可以访问、是否重定向、是否设置状态（如权限检查、语言切换等）

页面使用中间件

ts

<script setup lang="ts">
definePageMeta({
  middleware: [
    function (to, from) {
      // 自定义内联中间件
    },
    'auth',
  ],
});
</script>

让路由中间件，只在首次执行

让路由中间件只在用户首次进入，或者刷新页面 执行，路由跳转不执行

• 可通过process.server、process.client来判断
  • process.server仅服务端执行、process.client仅客户端执行

process.server

• process.server来判断，只在服务端渲染执行
• 首次进入，会先执行服务端渲染 => 客户端渲染

nuxt服务端中间件

• 服务端中间件 (位于 server/middleware/ 目录)
• 用于拦截所有 API 请求（如 /api/**），可进行鉴权、请求预处理、请求日志记录等。

请求拦截重定向特定页面中间件

• 需求：比如访问 /demo 时返回 demo.html的内容
  • 相当于 http://localhost:3000/demo 和 http://localhost:3000/demo.html 都一样
• 当访问 /demo 或 /demo/ 路径时，拦截请求并返回 public/demo.html 静态 HTML 内容

server/middleware/redirect.ts

ts

import { promises as fs } from 'node:fs'
import { join } from 'node:path'
import process from 'node:process'

export default defineEventHandler(async (event) => {
  const req = event.node.req
  const res = event.node.res

  const pathname = req.url

  // 只拦截根路径 /demo 或 /demo/
  if (pathname === '/demo' || pathname === '/demo/') {
    const filePath = join(process.cwd(), 'public', 'demo.html')
    try {
      const html = await fs.readFile(filePath, 'utf-8')
      res.setHeader('content-type', 'text/html; charset=utf-8')
      // 直接结束响应，返回静态 HTML 内容，URL 保持为 /demo
      res.end(html)
    }
    catch (err) {
      console.error('Error reading demo.html:', err)
      res.statusCode = 404
      res.end('Not found')
    }
  }
  // 其他请求继续正常处理
})