NUXT 3：如何在布局中使用路由中间件？（我可以吗？）答案

【问题标题】：NUXT 3: How to use route middleware in a layout? (Can I?)NUXT 3：如何在布局中使用路由中间件？（我可以吗？）
【发布时间】：2022-11-03 05:02:08
【问题描述】：

我一直在寻找在布局中使用 Nuxt 中间件。但是我不确定我是否可以，因为我在努克斯特 2, 可能在努克斯特 3.

该项目有 2 种不同的布局：Public.vue 和 Admin.vue。我只想在消耗的页面中使用中间件管理布局.因为使用它的页面应该只有登录用户才能访问，并且会在中间件内部进行检查。

我试过这个（不起作用）：

管理布局 |管理员.vue

<template>
  <div>
    <client-only>
      <admin-header />
    </client-only>
    <main>
      <slot />
    </main>
    <client-only>
      <admin-footer />
    </client-only>
  </div>
</template>

<script lang="ts">
import AdminHeader from "~~/components/admin/Header.vue"
import AdminFooter from "~~/components/admin/Footer.vue"

definePageMeta({
  middleware: "admin-auth"
});
</script>

中间件 | adminAuth.ts

export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to);
    console.log("Acessando o admin auth middleware");
})

【问题讨论】：

您的文件在middleware 目录中吗？也许尝试将其命名为admin-auth，不确定这是否有帮助。这似乎工作得很好：v3.nuxtjs.org/examples/routing/middleware 但是，是的，客户端中间件是可行的。

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

你不能。中间件仅适用于页面。您可以使用该身份验证中间件制作父页面组件，并在模板内添加 Nuxt Child，如下所示

例子：

/admin.vue route => /admin

<template/>
  // you can add auth based components as well
  <NuxtChild/>
</template> 
<script lang="ts">
  definePageMeta({
     middleware: "admin-auth"
  });
</script>

创建后行政文件夹

admin 文件夹中的所有其他组件都将使用您的身份验证中间件

admin/order.vue 路由 =>/admin/orders

admin/page.vue 路由 =>/admin/some-route

【讨论】：

嗯，我很确定您可以将中间件应用于布局。
请让我知道这怎么可能
你说的对。经过一番研究，我找到了相同的答案，但忘记在这里写了。真可惜……
如何调用全局中间件？

【解决方案2】：

您可以将.globals 用于中间件，使其适用于所有页面。所以把你的文件名改成/middleware/adminAuth.globals.ts

见这里https://v3.nuxtjs.org/migration/plugins-and-middleware/

【讨论】：