NUXT 3: Bagaimana untuk menggunakan perisian tengah penghalaan dalam susun atur? (Bolehkah saya?)

Question

Saya telah mencari untuk menggunakan perisian tengah Nuxt dalam reka letak saya. Tetapi saya tidak pasti sama ada ia boleh, tetapi, kerana saya menggunakannya dalam Nuxt 2, ia mungkin boleh dalam Nuxt 3.

Projek ini datang dalam 2 susun atur berbeza: Public.vue 和 Admin.vue. Saya hanya mahu menggunakan perisian tengah dalam halaman menggunakan Urus Reka Letak. Kerana halaman yang menggunakannya hanya boleh diakses oleh pengguna log masuk dan semakan dilakukan di dalam middleware.

Saya cuba ini (tidak berkesan):

Urus reka letak|urus.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>

Perisian tengah | adminAuth.ts

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

Answer 1

Middleware tidak boleh digunakan dalam susun atur kerana middleware hanya boleh digunakan dalam halaman, tetapi anda boleh mencuba kaedah ini.

Dengan mengisytiharkan .global 后缀来创建全局中间件，例如 auth.global.ts selepas nama fail middleware.

Dalam auth.global.ts fail anda boleh menggunakan elemen reka letak sebagai logik untuk mensimulasikan seolah-olah perisian tengah berada dalam tetapan reka letak anda.

Contoh logiknya macam ni

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

Semoga ini membantu

Answer 2

Anda tidak boleh. Middleware hanya berfungsi pada halaman.

Sebaliknya, buat komponen Halaman induk menggunakan perisian tengah auth dan komponen NuxtPage di dalam templat. Untuk mendapatkan maklumat lanjut tentang Penghalaan Bersarang, lihat dokumentasi Nuxt 3.

Contoh:

/pages/admin.vue(laluan => /admin)

sssccc

/pages/admin(folder)

admin/order.vue route => /admin/orders

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