NUXT 中间件 Middleware

本文介绍如何在Nuxt.js项目中使用中间件,包括如何创建、配置及使用异步中间件。中间件可用于在页面渲染前执行自定义逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

中间件可以使您的自定义的函数在渲染页面之前运行

所有的中间件都必须放置在middleware/目录下。文件名将作为中间件的名称(如:middleware/auth将成为中间件auth)。
中间件收到上下文作为第一个参数︰

export default function (context) {
  context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
}

中间件将按照此顺序在序列中执行:

  1. nuxt.config.js

  2. 匹配的布局

  3. 匹配的页面

中间件可以是异步的,仅返回一个Promise或者使用第二个callback返回值:
middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

然后,在nuxt.config.js,布局或者页面中,配置middleware参数
nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }  
}

中间件stats将在每次路由改变时被调用。
想了解中间件的例子,请移步example-auth0

郑重声明!英文极差,纯属看不懂文档自己整理,翻译如有问题请各位大神指教。如有不服,你来打我呀?

### Nuxt 3 中间件详解 在 Nuxt 3 应用程序中,中间件用于定义全局或局部的逻辑处理函数,在路由切换之前执行特定的操作。这些操作可以包括权限验证、页面重定向或是数据预取等。 #### 定义中间件 创建一个新的文件位于 `middleware/` 文件夹下,并命名为 `.ts` 或者 `.js` 结尾。例如: ```typescript // middleware/auth.ts export default defineNuxtMiddleware((context) => { console.log('Auth Middleware Called'); }); ``` 此代码片段展示了如何定义一个简单的认证中间件[^2]。 #### 使用中间件 ##### 全局应用 为了使某个中间件应用于整个应用程序中的每一个页面请求,可以在项目根目录下的 `nuxt.config.js/ts` 配置文件里注册它作为全局中间件: ```javascript // nuxt.config.ts import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ routeRules: { '/': { middleware: ['auth'] } }, }) ``` 上述配置使得 `/` 路径及其子路径都会触发名为 `auth` 的中间件[^2]。 ##### 局部调用 如果只需要针对单个页面或者布局组件来运行中间件,则可以直接在对应的 Vue 单文件组件内声明: ```vue <script setup> definePageMeta({ middleware: 'auth', }) </script> <template> <!-- 页面模板 --> </template> ``` 这种方式允许更细粒度地控制哪些视图应该受到该中间件的影响[^2]。 #### 实际案例分析 考虑这样一个场景:当用户尝试访问受保护的内容时,如果没有登录则自动跳转到登录页;反之继续加载目标资源。这可以通过编写如下所示的身份验证中间件实现: ```typescript // middleware/authenticated.ts export default defineNuxtMiddleware(async (to, from) => { const user = useUserStore(); // 假设这里是从 Vuex store 获取当前用户的实例 if (!user.isAuthenticated && to.path !== '/login') { return navigateTo('/login') } await Promise.resolve(); }); ``` 在此例子中,每当有新的导航发生时就会检查用户的登录状态并作出相应反应[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值