미들웨어: 미들웨어란 무엇이며 Nuxt.JS에서 사용하는 방법

미들웨어란 무엇입니까?

프런트 엔드에서 미들웨어는 새 페이지로 이동하기 전에 실행되는 코드 블록으로, 애플리케이션에서 다음과 같은 다양한 제어를 수행할 수 있습니다. :

• 인증: 사용자가 로그인되어 있는지 확인하고, 그렇지 않으면 로그인 화면으로 리디렉션됩니다.
• 권한: 사용자에게 해당 페이지에 대한 액세스 권한이 있는지 확인하고, 그렇지 않은 경우 권한이 있는 페이지로 리디렉션됩니다.
• 로그: 페이지 정보에 대한 정보를 저장합니다.

미들웨어는 페이지 로딩 시작부터 렌더링이 완료될 때까지 중간 계층으로 작동합니다.

이 미들웨어 기능은 Next.js 및 Nuxt.JS와 같은 최신 프런트엔드 프레임워크에 있습니다.

이 글에서는 Nuxt.JS에서 Route Middleware를 구현하는 방법을 알려드리겠습니다.

기술적이지 않은 방식의 미들웨어

더 간단하게 설명하기 위해 비유를 들어보겠습니다.

파티에 참가하고 싶다고 상상해 보세요. 이 과정에서 "미들웨어"인 3개의 파티 보안 직원을 거치게 되며, 각 사람은 특정 작업을 수행할 책임을 맡게 됩니다.

1. 먼저 경비원이 티켓이 있는지 확인하고, 유효한지 확인하는 방식으로, 인증 미들웨어와 마찬가지로 티켓이 없으면 매표소나 로그인 화면으로 리디렉션됩니다.

2. 두 번째 경비원은 권한 미들웨어와 마찬가지로 파티에 접근하기 위한 필수 요구 사항인 법적 연령인지 확인합니다. 입장에 필요한 권한이 없을 경우 파티라인에서 리디렉션됩니다.

3. 세 번째이자 마지막 경비원은 요청에 데이터를 추가할 수 있는 미들웨어와 유사하게 파티의 VIP 영역에 대한 접근 여부를 나타내는 식별 팔찌를 제공합니다.

마지막으로 모든 단계를 거치면 파티룸에 입장할 수 있게 됩니다.

미들웨어 유형

Nuxt.js에는 다음과 같은 유형의 미들웨어가 있습니다:

• 글로벌
• 인라인 또는 익명
• 후보

1. 글로벌 미들웨어는 /middleware 폴더 내에 생성되어 모든 페이지에서 실행됩니다. 전역 접미사를 추가해야 합니다.

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

1. 인라인 또는 익명 미들웨어는 Nuxt의 페이지 파일 내에서 직접 정의된 페이지별 미들웨어입니다. 이는 다른 페이지와 쉽게 공유할 수 없으므로 코드 재사용을 제한합니다.

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

1. 이름이 지정된 미들웨어는 /middleware 폴더 내에 생성됩니다.

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

이름이 지정된 미들웨어에서는 특정 미들웨어를 사용하는 페이지를 정의해야 합니다. 이를 수행하는 방법 중 하나는 해당 미들웨어를 사용할 페이지의 파일을 변경하는 것입니다.

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

PascalCase 또는 CamelCase와 같은 패턴으로 미들웨어 파일 이름을 지정하더라도 파일 이름은 케밥 케이스 패턴으로 정규화된다는 점도 중요합니다.

결론

이 기사를 통해 Nuxt.JS에서 미들웨어를 생성하고 사용하는 주요 요점을 간단하고 빠르게 설명할 수 있었으면 좋겠습니다 ??‍♂️.

Nuxt.JS의 미들웨어에 대한 추가 정보가 필요한 경우 공식 문서를 검색할 수 있습니다.

위 내용은 미들웨어: 미들웨어란 무엇이며 Nuxt.JS에서 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!