各位观众老爷们，大家好！ 今天咱们来聊聊 Nuxt.js 里的 “中间件” 这玩意儿。别看它名字听起来有点高大上，其实简单来说，它就是你网站请求生命周期里的一道道关卡，你可以在这些关卡里做各种各样的事情，比如身份验证、权限检查、甚至修改请求或者响应。
“喂，等等！生命周期是啥？”
好问题！ 简单来说，就是当用户访问你的网站时，Nuxt.js 会经历一系列的步骤，从接收请求到最终显示页面，这个过程就是生命周期。 中间件就好像一个个小精灵，在这些步骤的关键节点上出现，执行你赋予的任务。
“那它到底有啥用呢？”
用处可大了！ 举几个栗子：
- 身份验证: 确保只有登录用户才能访问某些页面。
- 权限控制: 允许不同角色的用户访问不同的内容。
- 日志记录: 记录每个请求的信息，方便调试和分析。
- 国际化: 根据用户的语言设置，显示不同的内容。
- 修改请求头或响应体: 在请求发送到服务器之前或者服务器返回响应之后，对数据进行修改。
- 重定向: 将用户重定向到其他页面。
“听起来有点意思，那 Nuxt.js 里有哪些中间件呢？”
Nuxt.js 提供了三种类型的中间件：
- 命名中间件 (Named Middleware): 定义在
middleware/目录下的独立文件，你可以在组件或页面中使用它们。 - 匿名中间件 (Anonymous Middleware): 直接在页面或组件中定义的中间件，通常用于只在该页面或组件生效的逻辑。
- 全局中间件 (Global Middleware): 在
nuxt.config.js文件中注册，会应用到你的整个应用程序。
“这三种中间件，到底哪个先执行，哪个后执行啊？脑袋要炸了！”
别急！ 咱们来捋一捋这个执行顺序：
- 全局中间件 (Global Middleware): 首先执行，它们会影响到整个应用程序。
- 布局中间件 (Layout Middleware): 如果使用了布局，那么布局中的中间件会在全局中间件之后执行。
- 页面中间件 (Page Middleware): 最后执行，它们只影响当前页面。
“明白了！可是，如果我定义了多个全局中间件，它们的顺序又是怎样的呢？”
全局中间件的执行顺序，取决于你在 nuxt.config.js 文件中的注册顺序。 先注册的先执行。
“那命名中间件和匿名中间件呢？它们又是什么关系？”
命名中间件和匿名中间件都是在页面或组件中使用的，它们的执行顺序取决于你在 middleware 数组中的排列顺序。 先写的先执行。
为了让大家更清晰，咱们来个表格总结一下：
| 中间件类型 | 定义位置 | 执行顺序 | 影响范围 |
|---|---|---|---|
| 全局中间件 | nuxt.config.js |
最先执行，按注册顺序 | 整个应用程序 |
| 布局中间件 | layouts/*.vue |
全局之后 | 当前布局及其子页面 |
| 页面中间件 | pages/*.vue 或组件中 |
最后执行，按定义顺序 | 当前页面或组件 |
| 命名中间件 | middleware/*.js |
在页面或组件中调用，按调用顺序 | 当前页面或组件 |
| 匿名中间件 | pages/*.vue 或组件中 |
在页面或组件中定义，按定义顺序 | 当前页面或组件 |
“表格不错！ 但是，光说不练假把式，来点代码看看！”
好嘞！ 满足你！
1. 命名中间件:
首先，在 middleware/auth.js 文件中创建一个命名中间件：
// middleware/auth.js
export default function ({ store, redirect }) {
// 如果用户未登录，则重定向到登录页面
if (!store.state.auth.loggedIn) {
return redirect('/login')
}
}然后，在 pages/profile.vue 页面中使用这个中间件：
// pages/profile.vue
<template>
<div>
<h1>用户资料</h1>
<p>欢迎, {{ $store.state.auth.user.name }}!</p>
</div>
</template>
<script>
export default {
middleware: ['auth'], // 使用名为 "auth" 的中间件
}
</script>在这个例子中，如果用户未登录，访问 /profile 页面会被重定向到 /login 页面。
2. 匿名中间件:
直接在 pages/index.vue 页面中定义一个匿名中间件：
// pages/index.vue
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
middleware: function ({ redirect }) {
// 假设你需要检查一个 cookie 是否存在
if (!document.cookie.includes('visited=true')) {
// 如果 cookie 不存在，则重定向到欢迎页面
return redirect('/welcome')
}
}
}
</script>在这个例子中，如果用户没有访问过，会被重定向到 /welcome 页面。
3. 全局中间件:
在 nuxt.config.js 文件中注册一个全局中间件：
// nuxt.config.js
export default {
middleware: ['logger'], // 注册名为 "logger" 的全局中间件
}然后，在 middleware/logger.js 文件中创建这个全局中间件：
// middleware/logger.js
export default function ({ route }) {
console.log('页面访问:', route.path)
}每次访问页面，都会在控制台输出当前页面的路径。
“代码看起来简单多了！ 那中间件里的 context 对象又是啥？ 感觉很神秘！”
context 对象是中间件的核心！ 它包含了 Nuxt.js 应用程序的所有信息，你可以通过它访问各种服务和数据。
context 对象里都有啥？
store: Vuex store 实例。route: 当前路由对象。params: 路由参数。query: 查询参数。req: Node.js 请求对象 (仅在服务器端可用)。res: Node.js 响应对象 (仅在服务器端可用)。redirect: 重定向函数。error: 错误处理函数。app: Vue 应用程序实例。$axios(如果使用了@nuxtjs/axios): Axios 实例。$config:nuxt.config.js文件中的publicRuntimeConfig和privateRuntimeConfig。
“哇！这么多东西！ 那我在中间件里应该怎么用它们呢？”
举几个例子：
- 访问 Vuex store:
export default function ({ store }) {
console.log('当前用户:', store.state.auth.user)
}- 获取路由参数:
export default function ({ params }) {
console.log('文章ID:', params.id)
}- 重定向到其他页面:
export default function ({ redirect }) {
return redirect('/login')
}- 发送 API 请求 (使用
@nuxtjs/axios):
export default function ({ $axios }) {
return $axios.$get('/api/data')
.then(data => {
console.log('API 数据:', data)
})
}“听起来很强大！ 那中间件里能不能使用 async/await 呢？”
当然可以！ 事实上，在中间件里使用 async/await 非常常见，尤其是在需要进行异步操作的时候，比如从服务器获取数据。
export default async function ({ $axios, store }) {
try {
const user = await $axios.$get('/api/user')
store.commit('setUser', user) // 更新 Vuex store
} catch (error) {
console.error('获取用户信息失败:', error)
}
}“OK！ 基本明白了！ 还有什么需要注意的吗？”
当然有！ 以下是一些使用中间件的注意事项：
- 避免循环重定向: 确保你的中间件不会导致循环重定向，否则会导致浏览器崩溃。
- 服务器端和客户端: 有些
context对象里的属性只在服务器端可用 (req,res)，在客户端使用时需要注意。 - 性能优化: 避免在中间件里执行耗时的操作，否则会影响页面加载速度。
- 错误处理: 在中间件里做好错误处理，避免程序崩溃。
“说得真好！ 感觉对 Nuxt.js 中间件的理解更深入了！ 谢谢老师！”
客气客气！ 希望今天的讲解对大家有所帮助。 记住，中间件是 Nuxt.js 中非常强大的工具，善用它们可以让你构建更安全、更灵活、更易于维护的应用程序。 下次再见！