NUXT 3: 레이아웃에서 라우팅 미들웨어를 어떻게 사용하나요? (해도 될까요?)

Question

저는 레이아웃에 Nuxt 미들웨어를 사용하려고 했습니다. 그런데 가능한지는 모르겠지만 Nuxt 2에서 사용했기 때문에 Nuxt 3에서도 가능할 수도 있겠네요.

이 프로젝트는 2가지 레이아웃으로 제공됩니다: Public.vue 和 Admin.vue. Manage Layout을 사용하는 페이지에서만 미들웨어를 사용하고 싶습니다. 이를 사용하는 페이지는 로그인한 사용자만 접근할 수 있고 확인은 미들웨어 내부에서 이루어지기 때문이다.

이것을 시도했습니다(작동하지 않음):

레이아웃 관리|manage.vue

으아악

미들웨어 adminAuth.ts

으아악

Answer 1

미들웨어는 페이지에서만 사용할 수 있기 때문에 레이아웃에서는 사용할 수 없지만 이 방법을 시도해 볼 수 있습니다.

미들웨어 파일명 뒤에 .global 后缀来创建全局中间件，例如 auth.global.ts를 선언합니다.

auth.global.ts 파일에서는 레이아웃 요소를 논리로 사용하여 마치 미들웨어가 레이아웃 설정에 있는 것처럼 시뮬레이션할 수 있습니다.

예제 로직은 이렇습니다

으아악

도움이 되기를 바랍니다

Answer 2

당신은 할 수 없습니다. 미들웨어는 페이지에서만 작동합니다.

대신 인증 미들웨어와 템플릿 내부의 NuxtPage 구성 요소를 사용하여 상위 페이지 구성 요소를 만듭니다. Nested Routing에 대한 자세한 내용은 Nuxt 3 설명서를 참조하세요.

예:

/pages/admin.vue(경로 => /admin)

으아아아

/pages/admin(폴더)

admin/order.vue 경로 => /admin/orders

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