VUEのURLクエリパラメーターで特別なキャラクターエスケープの問題に対処する方法は？

特別なキャラクターエスケープのためのVUEのURLクエリパラメーターをプロセス

単一のサインオンシナリオでは、URLパラメーターには、認証に使用されるidやkeyなどの情報が多くなることがよくあります。たとえば、URLはhttp://localhost:8088/taxbureaulogin?id=1206&key=ze9 ticzsrej...に似ている可能性があります。たとえば、ブラウザはその中の特殊文字を逃れることができます スペースに変更してください。 /逃げることもできます。フロントエンドVUEアプリケーションは、データの整合性を確保するために、これらの特殊文字を正しく処理する必要があります。

通常、 URLSearchParamsを使用して、URLクエリパラメーターを取得します。

 let searchparams = new urlsearchparams（window.location.search）;

ただし、この方法で得られたパラメーターは、ブラウザが逃げた可能性があります。たとえば、 ze9 ticzsrejfujj/bxjcq== ze9 ticzsrejfujj/bxjcq==になる可能性があります。

解決：

1. バックエンド処理（推奨）：バックエンドがトークンを生成する場合、 base64urlエンコーディングを使用して回避することをお勧めします / and =などの特殊文字。これは、問題を根本的に解決できる理想的なソリューションです。

2. フロントエンド処理（バックエンドを変更できない場合）：フロントエンドは、 encodeURIComponentを使用して取得したトークン値をエンコードし、バックエンドに渡すことができます。 Vueルーターのさまざまなバージョンの動作が異なることに注意する必要があります。

   • Vue Router 3.x： Vue Router 3.xは、特殊文字を自動的にデコードします。 location.hrefを使用して取得したURL情報も逃げられた文字列です。 URLSearchParamsによって取得されたパラメーターもデコードされています。したがって、バックエンドに渡す前にencodeURIComponentエンコードを使用する必要があります。

   • Vue Router 4.X： Vue Router 4.Xは、URLパラメーターの処理を最適化し、 $route属性のパラメーターエンコードがより一貫しています。 pathとfullPathの値はデコードされなくなり、 hashデコードされます。 push 、 resolve 、 replace方法を使用する場合、パスをエンコードする必要があります。

   次のコードは、Vueルーター3.xでencodeURIComponentを使用する例を示しています。

    let searchparams = new urlsearchparams（window.location.search）;
   key = searchParams.get（ 'key'）;
   let encodedKey = encodeuricomponent（key）; //エンコード後にバックエンドに渡します

3. $route属性（Vueルーター4.x）を使用します： Vue Router 4.xで、 $route属性を直接使用して、追加のエンコードなしでパラメーターを取得します。

要約すると、データの整合性とセキュリティを確保するために、バックエンド処理方法に優先順位を付けることをお勧めします。バックエンドを変更できない場合は、VUEルーターバージョンに基づいて適切なフロントエンド処理方法を選択します。

以上がVUEのURLクエリパラメーターで特別なキャラクターエスケープの問題に対処する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。