Webアプリケーションのセキュリティ認(rèn)証は非常に重要です。パーソナライズされたエクスペリエンスを有効にし、ユーザー固有のコンテンツ（ログインステータスなど）をロードし、許可を評価して許可されていないユーザーが個人情報にアクセスするのを防ぐために使用することもできます。

通常、アプリケーションは、特定のルートの下にコンテンツを配置し、リダイレクトルールを構(gòu)築することにより、コンテンツを保護(hù)し、ユーザーにアクセス権に基づいてリソースにアクセスするように指示します。保護(hù)されたルートの背後にコンテンツを確実に配置するには、獨立した靜的ページを構(gòu)築する必要があります。このようにして、リダイレクトルールはリダイレクトを正しく処理できます。

VUEなどの最新のフロントエンドフレームワークで構(gòu)築されたシングルページアプリケーション（SPA）の場合、リダイレクトルールを使用してルーティングを保護(hù)することはできません。すべてのページは、ブラウザの視點からの単一のエントリファイルから來ているため、1つのページのみがあります：index.html。 SPAでは、ルーティングロジックは通常、ファイルをルーティングします。この記事は、主にここで認(rèn)証を構(gòu)成します。 Vueのナビゲーションガードに特に依存して、認(rèn)証固有のルートを処理するために、ルートが完全に解析される前に選択されたルートにアクセスするのに役立ちます。それがどのように機(jī)能するかを掘り下げましょう。

ルーティングの基本

ナビゲーションガードは、ルーティングの解決方法に関する追加機(jī)能を提供するVueルーターの特定の機(jī)能です。それらは主にエラー狀態(tài)を処理し、ワークフローを突然中斷することなくシームレスにユーザーをガイドするために使用されます。

Vueルーターには、グローバルガード、ルーター限定ガード、コンポーネントガードの3つの主要なカテゴリがあります。名前が示すように、グローバルガードは、ナビゲーションをトリガーするとき（つまり、URLが変更されたとき）と呼ばれます。これは、関連するルートを呼び出すとき（つまり、URLが特定のルートと一致するとき）、ルートのコンポーネントの作成、更新、または破壊時にコンポーネントガードが呼び出されます。各カテゴリには、アプリケーションルーティングをより詳細(xì)に制御する他の方法があります。 Vueルーターの各ナビゲーションガードで利用可能なすべての方法の迅速な內(nèi)訳を次に示します。

グローバルガード

• beforeEach ：任意のルートに入る前に操作（このスコープにアクセスできません）
• beforeResolve ：ナビゲーション確認(rèn)前のアクションですが、コンポーネントガードの後（以前と同じ、この範(fàn)囲にアクセスできます）
• afterEach ：ルーティングの解決後の操作（ナビゲーションに影響を與えることはできません）

ルート専用ガード

• beforeEnter ：特定のルートに入る前に操作（グローバルガードとは異なり、このガードはこれにアクセスできます）

コンポーネントガード

• beforeRouteEnter ：ナビゲーション確認(rèn)前およびコンポーネント作成の前に実行されるアクション（これにアクセスできません）
• beforeRouteUpdate ：同じコンポーネントを使用して新しいルートを呼び出すと実行された操作
• beforeRouteLeave ：ルートを出る前に操作

ルーティングを保護(hù)します

それらを効果的に実裝するには、特定のシナリオでいつ使用するかを知ることが役立ちます。たとえば、分析のためにページビューを追跡する場合は、ルートの後にトリガーされ、関連するコンポーネントが完全に解析されるため、グローバル後のガードを使用することをお勧めします。ルートの解析の前にデータをVuexストレージにプレフィングする場合は、前のルート専用ガードを使用してそうすることができます。

この例では、ユーザーアクセス権に基づいて特定のルートの保護(hù)を扱っているため、コンポーネントガード、つまり前のフックを使用します。このナビゲーションガードにより、解析が完了する前に正しいルートにアクセスできます。これは、ユーザーが渡す前にデータを取得するか、データがロードされているかどうかを確認(rèn)できることを意味します。実裝の仕組みの詳細(xì)を掘り下げる前に、既存のルーティングファイルに前のフックがどのように組み込まれているかを簡単に見てみましょう。以下は、保護(hù)されたルートを含むサンプルルーティングファイルです。以前のフックを次のように追加します。

 const router = new Vuerouter（{
  ルート：[
    ...
    {
      パス：「/保護(hù)」、
      名前：「保護(hù)」、
      コンポーネント：import（/ * webpackchunkname： "Protected" */'./pretected.vue'）、
      前の（へ、から、次へ）{
        //ここにロジック}
    }
  ]
}）

ルーティング構(gòu)造

Beforyenterの構(gòu)造は、Vueルーターで利用可能な他のナビゲーションガードと変わりません。次の3 toのパラメーターを受け入れます。アプリケーションが去る「現(xiàn)在/差し迫った過去」ルートfrom 。 next 、ルートを正常に解決するために呼び出さなければならない関數(shù)。

一般に、Vueルーターを使用する場合、次は引數(shù)なしで呼び出されます。ただし、これは永続的な成功狀態(tài)を想定しています。私たちの場合、不正なユーザーが保護(hù)されたリソースにアクセスできず、適切にリダイレクトできる代替パスがあることを確認(rèn)したいと考えています。これを行うには、パラメーターを次に渡します。これを行うには、ルート名を使用してユーザーをナビゲートします。

次（{
  名前：「ダッシュボード」
}）

この例には、ユーザーの承認(rèn)トークンを保存するVuexストアがあると仮定しましょう。ユーザーが権限を持っているかどうかを確認(rèn)するには、このストアを確認(rèn)し、適切にまたはルートを介して失敗します。

前の（へ、から、次へ）{
  // vuexストレージを確認(rèn)する//
  if（store.getters ["auth/haspermission"]）{
    次（）
  } それ以外 {
    次（{
      名前：「ダッシュボード」//セキュアルートに戻る//
    }）;
  }
}

イベントが同期して発生し、VUEX操作が完了するまでルートが時期尚早にロードされないようにするために、ナビゲーションガードを変換してAsync/awaitを使用しましょう。

 async beforeder（to、from、next）{
  試す {
    var haspermission = await store.dispatch（ "auth/haspermission"）;
    if（haspermission）{
      次（）
    }
  } catch（e）{
    次（{
      名前：「ダッシュボード」//セキュアルートに戻る//
    }）
  }
}

ソースを覚えておいてください

これまでのところ、當(dāng)社のナビゲーションガードは、許可されていないユーザーを出身地（つまり、ダッシュボードページ）にリダイレクトすることにより、保護(hù)されたリソースにアクセスできないようにする目的を達(dá)成してきました。それでも、そのようなワークフローは破壊的です。リダイレクトは予想外であるため、ユーザーはそれがユーザーエラーであると考え、ルートに繰り返しアクセスしようとする場合があります。最終的にアプリケーションが破損していると考えます。この問題を解決するために、ユーザーがいつ、なぜリダイレクトされるのかをユーザーに知らせる方法を作成しましょう。

クエリパラメーターを次の関數(shù)に渡すことでこれを行うことができます。これにより、保護(hù)されたリソースパスをリダイレクトURLに添付できます。したがって、ユーザーにアプリにログインするように促したり、停止した場所を覚えていないように適切な権限を取得するように促したい場合は、そうすることができます。以下に示すように、以前の機(jī)能に渡されたルートオブジェクトを介して、保護(hù)されたリソースのパスにアクセスできます。

 async beforeder（to、from、next）{
  試す {
    var haspermission = await store.dispatch（ "auth/haspermission"）;
    if（haspermission）{
      次（）
    }
  } catch（e）{
    次（{
      名前：「ログイン」、//セキュアルートに戻る//
      クエリ：{redirectfrom：to.fullpath}
    }）
  }
}

通知します

ユーザーが保護(hù)されたルートにアクセスできないワークフローを強(qiáng)化する次のステップは、メッセージを送信してエラーと問題の解決方法を通知することです（正しい許可をログインまたは取得することにより）。これを行うには、リダイレクトが発生したかどうかを確認(rèn)するために、特にbeforerouteenterを使用してコンポーネントガードを使用できます。リダイレクトパスをクエリパラメーターとしてルーティングファイルに渡すため、ルーティングオブジェクトをチェックしてリダイレクトが発生したかどうかを確認(rèn)できます。

 beforerouteenter（to、from、next）{
  if（to.query.redirectfrom）{
    //何かをする//
  }
}

先に述べたように、すべてのナビゲーションガードは、ルートを解決するために隣に電話しなければなりません。以前に見たように、次の関數(shù)の利點は、オブジェクトを渡すことができることです。わからないかもしれないことは、次の関數(shù)でVUEインスタンスにアクセスできるということです。おお！これがどのように見えるかです：

 next（（）=> {
  console.log（this）//これはvueインスタンスです}）

あなたは、前に使用するとき、あなたは技術(shù)的にこの範(fàn)囲にアクセスしていないことに気づいたかもしれません。これは事実かもしれませんが、VMを機(jī)能に渡すことでVueインスタンスにアクセスできます。

 next（vm => {
  console.log（vm）//これはvueインスタンスです}）

これは、追加の構(gòu)成なしで関連するエラーメッセージを使用してデータプロパティを簡単に作成して適切に更新できるため、これは特に便利です。この方法を使用して、次のようなコンポーネントが取得されます。

<template><div>
    {{errormsg}}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "對不起，您沒有訪問請求路由的權(quán)限"
      })
    } else {
      next()
    }
  }
}
</script>

結(jié)論は

認(rèn)証をアプリケーションに統(tǒng)合するプロセスは難しい場合があります。許可されていないユーザーがルートにアクセスしないようにする方法と、ユーザーのアクセス許可に基づいてワークフローを構(gòu)築する方法を説明し、ユーザーを保護(hù)されたリソースにリダイレクトします。これまでのところ、私たちの仮定は、アプリケーションで認(rèn)証を構(gòu)成していることです。まだ構(gòu)成しておらず、すぐに起動して実行したい場合は、認(rèn)証をサービスとして使用することを強(qiáng)くお勧めします。 Netlifyの認(rèn)証ウィジェットやAuth0のロックなど、一部のプロバイダーがあります。

以上がナビゲーションガードでVueルートを保護(hù)しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。