ミドルウェア: ミドルウェアの概要と Nuxt.JS での使用方法

ミドルウェアとは何ですか?

フロントエンドでは、ミドルウェアは新しいページへのナビゲーションが行われる前に実行されるコードのブロックです。これにより、アプリケーションで次のようなさまざまな制御を実行できます。 :

• 認証: ユーザーがログインしているかどうかを確認します。ログインしていない場合は、ログイン画面にリダイレクトされます。
• 権限: ユーザーがそのページにアクセスする権限を持っているかどうかを確認し、そうでない場合は、権限のあるページにリダイレクトされます。
• ログ: ページ情報に関する情報を保存します。

ミドルウェアは中間層として機能し、ページの読み込みの開始からレンダリングが完了するまで機能します。

このミドルウェア機能は、Next.js や Nuxt.JS などの最新のフロントエンド フレームワークに存在します。

この記事では、Nuxt.JS で Route Middleware を実装する方法を説明します。

あまり技術的ではないミドルウェアの説明

もっと簡単に説明するために、次のたとえを使用します。

あなたがパーティーに参加したいと想像してください。このプロセスでは、「ミドルウェア」である 3 つのパーティーのセキュリティ担当者を経由し、それぞれが特定のアクションを実行する責任を負います。

1. 最初の警備員は、認証ミドルウェアと同様に、チケットを持っているかどうかを確認し、チケットが有効であるかどうかを確認します。チケットを持っていない場合は、チケット売り場またはログイン画面にリダイレクトされます。

2. 2 番目の警備員は、許可ミドルウェアと同様に、パーティーにアクセスするための必須要件である法定年齢に達しているかどうかを確認します。入力するために必要な許可がない場合は、パーティーラインからリダイレクトされます。

3. 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");
  }
});

名前付きミドルウェアでは、特定のミドルウェアを使用するページを定義する必要があります。これを行う方法の 1 つは、そのミドルウェアを使用するページのファイルを変更することです。

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

また、ミドルウェア ファイルに PascalCase や CamelCase などのパターンで名前を付けた場合でも、ファイル名はケバブケース パターンに正規化されるということも重要です。

結論

この記事で、Nuxt.JS でのミドルウェアの作成と使用の主要なポイントを簡単かつ迅速に説明できたことを願っています ??‍♂️。

Nuxt.JS のミドルウェアに関する詳細情報が必要な場合は、公式ドキュメントを検索してください。

以上がミドルウェア: ミドルウェアの概要と Nuxt.JS での使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。