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

Question

我一直在寻找在布局中使用 Nuxt 中间件。但我不确定我是否可以，但是，因为我在Nuxt 2中使用了它，所以在Nuxt 3中可能是可能的。

该项目有 2 种不同的布局：

Public.vue

和

Admin.vue

。我只想在使用 Admin 布局 的页面中使用中间件。因为使用它的页面只能由登录用户访问，并且会在中间件内部进行检查。

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

管理布局 |管理.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");
})

Answer 1

你不能。中间件仅适用于页面。

相反，在模板内使用 auth 中间件和

NuxtPage

组件创建一个父 Page 组件。有关嵌套路由的更多信息，请参阅 Nuxt 3 文档。

示例：

/pages/admin.vue（路线 => /admin）

<template>
  // you can add auth based components as well
  <NuxtPage />
</template>

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

/pages/admin（文件夹）

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

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

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

Answer 2

布局中不可以使用中间件，因为中间件只能在页面中使用，但是你可以尝试使用这种方法。

通过在中间件文件名后声明

.global

后缀来创建全局中间件，例如

auth.global.ts

。

在

auth.global.ts

文件中，您可以使用布局元作为逻辑进行模拟，就好像中间件位于您的布局设置中一样。

示例逻辑是这样的

export default defineNuxtRouteMiddleware((to, from) => {
    const user = useUserStore();
    
    if (!user && to.meta.layout === auth) {
        return navigateTo("/login");
    }
});

希望这有帮助

Answer 3

您可以使用中间件的

.global

将其应用于所有页面。 所以将文件名更改为

/middleware/adminAuth.global.ts

参见此处https://nuxt.com/docs/guide/directory-struct/middleware

Answer 4

添加了一个名为

router.global.ts

的文件

已添加到

/src/middleware/router.global.ts

router.global.ts内容：

export default defineNuxtRouteMiddleware((to) => {
    if (to.fullPath.includes('+')) to.fullPath = to.fullPath.replace(/\+/g, '%20');
});

nuxt.config.ts

添加：

router: {
     middleware: ['router'],
},

Answer 5

好吧，我个人在布局过渡方面遇到了困难

{ name }

，我发现可以使用

useRoute()

来设置它，如下所示：

<script setup lang="ts">
import { ref, nextTick } from "vue";

definePageMeta({
  layout: "lay1",
  layoutTransition: {
    name: "slide-left",
  },
});

const side = ref("lay1");

const sw = () => {
  const route = useRoute();

  if (side.value === "lay1") {
    side.value = "lay2";
    route.meta.layoutTransition = { name: "slide-left" };
    nextTick(() => {
      setPageLayout("lay2");
    });
  } else {
    side.value = "lay1";
    route.meta.layoutTransition = { name: "slide-right" };
    nextTick(() => {
      setPageLayout("lay1");
    });
  }
};
</script>