Vue.jsでアドレスバーパラメータを非表示にする方法-フロントエンドQ&A-php.cn

Vue.jsでアドレスバーパラメータを非表示にする方法

PHPz

リリース： 2023-04-07 13:02:43

オリジナル

3292 人が閲覧しました

Vue.js を使用してフロントエンドプロジェクトを開発する場合、URL アドレスバーパラメーターの処理は非常に基本的ですが重要な問題です。多くの場合、URL からパラメータを取得する必要があります。たとえば、前のページから現在のページにジャンプする場合、このページに何らかの情報を渡す必要があります。この場合、この情報を URL に渡す必要があります。パラメータの形式で。ただし、場合によってはこれらのパラメータを非表示にする必要がある場合があり、URL 内の機密情報が簡単に漏洩することは望ましくないため、この記事では Vue.js でアドレスバーのパラメータを非表示にする方法を紹介します。

1. 動的ルーティング

まず、Vue.js の動的ルーティングを使用して、アドレスバーのパラメーターを非表示にすることができます。動的ルーティングは、URL 内のパラメータを表示されている実際のコンポーネントにマップする手法です。たとえば、記事一覧ページがあるとします。各記事にはこの記事を識別するための固有の ID があり、この ID をルートのパラメータとして使用し、コンポーネントでこの ID を読み取って使用することができます。該当する記事の情報です。

具体的には、まずルーティング設定で動的ルートを定義し、ルーティングパスの特定のセグメント (記事 ID など) を動的パラメータとして設定します。

const router = new VueRouter({
  routes: [
    {
      path: '/article/:id',
      name: 'Article',
      component: Article
    }
  ]
})

ログイン後にコピー

この例では、 :id は記事の ID を表す動的パラメータです。対応するコンポーネントでは、$route.params.id を通じてこのパラメータの値を取得できます:

export default {
  mounted () {
    console.log(this.$route.params.id)
  }
}

ログイン後にコピー

このようにして、ユーザーがこのルートにアクセスすると、このパラメータの値を取得できます。コンポーネントをパラメータの値に置き換えると、このパラメータは URL に表示されません。

2. クエリパラメータ

動的ルーティングの使用に加えて、クエリパラメータを使用してアドレスバーのパラメータを非表示にすることもできます。クエリパラメーターは、? で区切られたキーと値のペアであり、さまざまなパラメーターを文字列の形式で URL に渡すことができます。

たとえば、検索ページがあり、一致する結果を取得するために検索時にユーザーが入力したキーワードをサーバーに渡す必要があるとします。入力されたキーワードはクエリパラメータとして使用でき、次に、ルーティングコンポーネントで、次のパラメータを取得して解析します。

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      name: 'Search',
      component: Search
    }
  ]
})

// 当用户在输入框中输入搜索关键词时
this.$router.push({
  name: 'Search',
  query: { keyword: '关键词' }
})

export default {
  mounted () {
    console.log(this.$route.query.keyword)
  }
}

ログイン後にコピー

この例では、query オプションは、渡されたパラメータを表します。次に、コンポーネント内で、$route.query.keyword を通じてこのパラメータの値を取得できます。この方法では、渡される実際のパラメータは URL には表示されません。

3. URL で暗号化パラメータを使用する

上記の 2 つの方法に加えて、URL で暗号化パラメータを使用してアドレスバーパラメータを非表示にすることもできます。具体的には、パラメータを URL に渡す前に暗号化できるため、URL が他人に傍受された場合でも、実際のパラメータ値は簡単に解析できません。

暗号化にはさまざまな方法があり、対称暗号化 (DES、AES など) や非対称暗号化 (RSA など)、およびその他の暗号化アルゴリズムを使用できます。ここではあまり紹介しません。

Vue.js で暗号化されたパラメーターを使用する場合、暗号化されたパラメーターを Cookie や LocalStorage などのローカルストレージに書き込み、後続のページでこのデータを読み取って復号化できるようにすることができます。これにより、暗号化されたパラメータはローカルストレージにのみ表示され、URL には公開されなくなります。注意する必要がある唯一のことは、暗号化パラメータの長さは平文パラメータの長さよりも短くする必要があることです。そうしないと、Cookie やその他のメモリが大きくなりすぎます。

上記は、Vue.js でアドレスバーパラメーターを非表示にする 3 つの方法です。どの方法を使用する場合でも、セキュリティを確保しつつ、URL 内のパラメータ値が可能な限り隠蔽されるようにする必要があります。確かに、これは簡単な問題ではありませんが、実際の開発では、この問題は一部の機密データにとって非常に重要です。

以上がVue.jsでアドレスバーパラメータを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。