vue.js NUXT 3：如何在布局中使用路由中间件？(我可以吗？)

smdnsysy 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(190)

我一直在寻找在布局中使用Nuxt中间件。但是我不确定我是否可以，但是，因为我在Nuxt 2中使用了它，它可能在Nuxt 3中使用。
该项目有两种不同的布局：Public.vue和Admin.vue。我只想在使用Admin布局的页面中使用中间件。因为使用它的页面应该只由登录的用户访问，并且它将在中间件内部被检查。
我试过这个（不起作用）：
管理布局| 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");
})

vue.js

来源：https://stackoverflow.com/questions/73293352/nuxt-3-how-to-use-route-middleware-in-a-layout-can-i

2条答案

按热度按时间

gfttwv5a1#

您不能。中间件只对页面起作用。您可以使用该auth中间件创建父Page组件，并在模板内添加NuxtChild，如下所示
示例：
/admin.vue路由=〉/admin

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

创建admin文件夹后
admin文件夹中的所有其他组件将使用您的身份验证中间件
管理员/订单.vue路由=〉/管理员/订单 *
管理员/page.vue路由=〉/管理员/某个路由 *

赞(0）回复(0）举报 2022-11-17

u2nhd7ah2#

您可以使用.globals到中间件，以便将其应用于所有页面。
请参阅此处https://v3.nuxtjs.org/migration/plugins-and-middleware/

赞(0）回复(0）举报 2022-11-17