Vueドキュメントでのルーティング認証機能の使い方

Vue は、非常に便利で使いやすいルーティング メカニズムを提供する、非常に人気のある JavaScript フレームワークです。 Vue では、ルートを定義することでページ ジャンプを管理できますが、実際の開発プロセスでは、ユーザーが権限のあるページにのみアクセスできるようにするために、特定のルートを認証する必要があることがよくあります。この記事では、Vue のドキュメントで提供されているルーティング認証機能の使用方法を紹介します。

ルーティング認証機能とは何ですか?

ルーティング認証機能は、Vue が提供するグローバル ルーティング ガードの 1 つで、ユーザーが特定のルートにアクセスする権限を持っているかどうかを検証するために使用できます。ルーティング認証機能はルーティング設定で定義する必要があり、特定のルートに入る前に実行されます。ルート認証関数が true を返した場合、そのユーザーはルートへのアクセス権限を持っており正常に入場できることを意味しますが、それ以外の場合、ユーザーはルートへのアクセス権限を持たないことを意味し、リダイレクトされます。他のページが表示されたり、エラーメッセージが表示されます。

ルーティング認証機能を定義するにはどうすればよいですか?

Vue では、beforeEnter 関数を使用してルーティング認証関数を定義できます。 beforeEnter 関数はルーティング設定で別途定義される関数で、to、from、next の 3 つのパラメータを受け取ります。

to パラメータは入力するターゲットの配線オブジェクトを表し、from は現在の配線オブジェクトを表します。next は配線のジャンプ動作を制御するために使用される関数です。 beforeEnter 関数では、ユーザーの権限を判断し、その判断結果に基づいて次の関数を呼び出して、ルートをジャンプし続けるかどうかを制御できます。

以下は beforeEnter 関数のサンプル コードです:

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (user.checkAdmin()) {
          next()
        } else {
          next('/login')
        }
      }
    }
  ]
})

上記のコードでは、beforeEnter という名前の関数を定義し、ダッシュボード ルーティングの beforeEnter 関数として使用します。ユーザーが /dashboard ルートに入ると、Vue は beforeEnter 関数を呼び出し、to、from、next の 3 つのパラメーターを渡します。

beforeEnter 関数では、まず checkAdmin という関数を呼び出して、ユーザーが管理者であるかどうかを確認します。ユーザーが管理者の場合は、next 関数を呼び出してルートが通常どおり /dashboard ルートにジャンプできるようにします。それ以外の場合は、next('/login') を呼び出してユーザーをログイン ページにリダイレクトします。

次の関数が呼び出されない場合、ルートはブロックされ、デフォルトではジャンプしないことに注意してください。

ルーティング認証機能のアプリケーション シナリオ

ルーティング認証機能は、ユーザーの権限を確認する必要があるすべてのシナリオに適しています。例:

1. 権限管理: たとえば、管理者が特定のページにアクセスするには管理者権限が必要です。
2. ログイン検証: たとえば、ユーザーがログインを必要とする特定のページにアクセスする場合、最初にログイン検証を実行する必要があります。
3. アカウントのステータスの確認: たとえば、ユーザーがアカウントの開設を必要とする特定のページにアクセスするとき、アカウントが開設されているかどうかを確認する必要があります。

概要

Vue におけるルート認証機能は、ユーザーが特定のルートにアクセスする権限を持っているかどうかを確認するために使用できる非常に実用的な機能です。 beforeEnter関数を定義し、その中でユーザー権限を判定することで、非常に便利にルーティング認証機能を実装することができます。

以上がVueドキュメントでのルーティング認証機能の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。