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

smdnsysy  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(192)

我一直在寻找在布局中使用Nuxt中间件。但是我不确定我是否可以,但是,因为我在Nuxt 2中使用了它,它可能在Nuxt 3中使用。
该项目有两种不同的布局:Public.vueAdmin.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");
})
gfttwv5a

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路由=〉
/管理员/某个路由 *

u2nhd7ah

u2nhd7ah2#

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

相关问题