Vueガードの使い方

Vue は、開発者が応答性の高い Web アプリケーションを作成するのに役立つ多くの機能とオプションを提供する人気のある JavaScript フレームワークです。 Vue ではガードは非常に重要な概念であり、この記事では Vue ガードの基本的な使用法とケースについて説明します。

Vue ガードの概要

Vue では、ガードはルートとコンポーネントのライフサイクル イベントをリッスンできる関数です。これらのイベントがトリガーされると、ガードはユーザー権限の確認、受信データのコピーと検査などのアクションを実行できます。 Vue ガードは、グローバル ガードとルーティング ガードの 2 つのカテゴリに分類され、それらの主な違いは監視するオブジェクトにあります。

グローバル ガード

グローバル ガードは、Vue アプリケーションのライフサイクルに関連付けられています。各 Vue インスタンスが作成、破棄、更新、またはマウントされるときに、いくつかの操作を実行できます。グローバル ガードには、次の 4 つのフック関数が含まれます:

1. beforeCreate: Vue インスタンスが初期化された後、データ監視およびイベント/ウォッチャー イベント設定の前に呼び出されます。このフック関数は、コンポーネントレベルのデータ/状態を初期化するのに適しています。
2. created: Vue インスタンスの作成後に呼び出されます。この時点では、コンポーネント インスタンスは DOM にマウントされていません。このフック関数では一部の非同期操作を実行できますが、コンポーネントの状態データを変更することはお勧めできません。
3. beforeMount: Vue インスタンスが DOM 要素にマウントされる前に呼び出されます。この時点では、コンポーネントのテンプレートは HTML 文字列にコンパイルされていますが、まだ DOM には挿入されていません。
4. mounted: Vue インスタンスが DOM 要素にマウントされた後に呼び出されます。このフック関数内で DOM 要素にアクセスし、サードパーティのプラグインの初期化などの他の操作を実行できます。

ルート ガード

ルート ガードは、アプリケーションが特定のルートに移動するときにトリガーされるフック関数です。ルートのアクセス履歴を監視し、ユーザーが特定のルートにアクセスする権限を持っているかどうかを確認し、非同期データの読み込みやその他の操作を処理できます。 Vue のルート ガードには、次の 6 つのフック関数が含まれています:

1. beforeRouteEnter: ルートがコンポーネントに入る前に呼び出されます。このフック関数ではコンポーネントのインスタンスにアクセスできますが、コンポーネント内の状態データやインスタンス メソッドにはアクセスできません。
2. beforeRouteUpdate: ルートが更新されるときに呼び出されます。通常、非同期データのロードなどの操作を処理するために使用されます。
3. beforeRouteLeave: ルートがコンポーネントから離れるときに呼び出されます。ガードを使用すると、ユーザー入力を検証したり、保存されていない変更についてユーザーに警告したりできます。
4. beforeEach: 新しいルートに移動する前に呼び出されます。このフック関数では、ユーザーの権限を確認したり、非同期データのロードやその他の操作を処理したりできます。
5. afterEach: ナビゲーションの完了後に呼び出されます。ナビゲーション中に発生したエラーは、このフック関数で処理できます。
6. onError: ルート ナビゲーションでエラーが発生したときに呼び出されます。リクエストの失敗やネットワークエラーなどの例外は、このフック関数で処理できます。

Vue ガードの使用

Vue ガードは実際の開発において非常に重要であり、さまざまなシナリオでビジネス ロジックを処理するために使用できます。以下では、例を使用して Vue ガードの基本的な使用法を示します。

アクセスするためにユーザーのログインが必要なページがあるとします。ユーザーがログインしていない場合は、ログイン ページにリダイレクトする必要があります。 beforeEach ガードを使用してこの機能を実現できます。まずルーティング配列を定義します。

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

ルーティング構成では、アクセスにログインが必要な /profile ルートを指定し、ルーティング メタ情報による認証が必要であるとマークします。次に、router.js ファイルに beforeEach フック関数を追加します。

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/login');   //如果需要登录并且用户未登录，则重定向到登录页面
  } else {
    next();   //否则允许导航到目标路由
  }
});

beforeEach フック関数では、まず現在のユーザー オブジェクト currentUser を取得し、次に、requiresAuth 属性を使用して、ターゲット ルートにログインが必要かどうかを判断します。アクセスするために。ログインが必要で、現在のユーザーがログインしていない場合は、ログイン ページにリダイレクトされます。それ以外の場合は、ターゲット ルートへのナビゲーションを許可します (ナビゲーションを許可するには next() メソッドを使用します)。

結論

Vue ガードは Vue フレームワークにおける非常に重要な概念であり、ルーティングとコンポーネントのライフサイクル イベントを監視し、これらのイベントがトリガーされたときにいくつかの操作を実行するために使用できます。ユーザーの認証、権限、受信データのコピーと検査など。この記事では、グローバル ガードとルーティング ガードの基礎知識を紹介し、Vue ガードの基本的な使用例を示すことで、開発者が Vue ガードをより深く理解して使用し、実際の開発でその役割を十分に活用できるように設計されています。

以上がVueガードの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。