Bagaimana untuk menyembunyikan parameter bar alamat dalam Vue.js

Apabila menggunakan Vue.js untuk membangunkan projek hadapan, pemprosesan parameter bar alamat URL ialah isu yang sangat asas tetapi penting. Dalam banyak kes, kita perlu mendapatkan parameter daripada URL Contohnya, apabila melompat dari halaman sebelumnya ke halaman semasa, kita perlu menghantar beberapa maklumat ke halaman ini, kita perlu menghantar maklumat ini ke URL dalam bentuk parameter. Walau bagaimanapun, kadangkala parameter ini perlu disembunyikan Lagipun, maklumat sensitif dalam URL tidak seharusnya mudah bocor, jadi artikel ini akan memperkenalkan cara menyembunyikan parameter bar alamat dalam Vue.js.

1. Penghalaan dinamik

Pertama sekali, kita boleh menyembunyikan parameter dalam bar alamat melalui penghalaan dinamik Vue.js. Penghalaan dinamik ialah teknik yang memetakan parameter dalam URL kepada komponen sebenar yang dipaparkan. Sebagai contoh, kami menganggap bahawa terdapat halaman senarai artikel Setiap artikel mempunyai ID unik untuk mengenal pasti artikel ini. Kami boleh menggunakan ID ini sebagai parameter laluan, dan kemudian membaca ID ini dalam komponen dan menggunakannya maklumat artikel yang sepadan.

Secara khususnya, kita boleh mentakrifkan laluan dinamik dahulu dalam konfigurasi penghalaan dan menetapkan segmen tertentu laluan penghalaan (seperti ID artikel) sebagai parameter dinamik:

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

Dalam Dalam contoh ini, :id ialah parameter dinamik yang mewakili ID artikel. Dalam komponen yang sepadan, kita boleh mendapatkan nilai parameter ini melalui $route.params.id:

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

Dengan cara ini, apabila pengguna mengakses laluan ini, nilai parameter boleh diperolehi dalam komponen, dan URL Parameter ini tidak akan dipaparkan.

2. Parameter pertanyaan

Selain menggunakan penghalaan dinamik, kami juga boleh menyembunyikan parameter dalam bar alamat melalui parameter Pertanyaan. Parameter pertanyaan ialah pasangan nilai kunci yang dipisahkan oleh ?, yang boleh menghantar pelbagai parameter ke URL dalam bentuk rentetan.

Sebagai contoh, kami menganggap bahawa terdapat halaman carian, dan kata kunci yang dimasukkan oleh pengguna perlu dihantar ke pelayan semasa mencari untuk mendapatkan hasil yang sepadan Kata kunci yang dimasukkan boleh digunakan sebagai parameter Pertanyaan, dan kemudian dalam komponen penghalaan Dapatkan dan huraikan parameter ini dalam:

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)
  }
}

Dalam contoh ini, pilihan query mewakili parameter yang diluluskan. Kemudian anda boleh mendapatkan nilai parameter ini melalui $route.query.keyword dalam komponen. Dengan cara ini, parameter sebenar yang diluluskan tidak akan kelihatan dalam URL.

3. Gunakan parameter yang disulitkan dalam URL

Selain daripada dua kaedah di atas, kami juga boleh menggunakan parameter yang disulitkan dalam URL untuk menyembunyikan parameter bar alamat. Secara khusus, kami boleh menyulitkan parameter sebelum menghantarnya ke URL, supaya walaupun URL dipintas oleh orang lain, nilai parameter sebenar tidak dapat dihuraikan dengan mudah.

Terdapat banyak cara untuk menyulitkan dan anda boleh menggunakan algoritma seperti penyulitan simetri (seperti DES, AES) atau penyulitan asimetri (seperti RSA) untuk penyulitan. Tidak banyak pengenalan di sini.

Apabila menggunakan parameter yang disulitkan dalam Vue.js, anda boleh menulis parameter yang disulitkan ke dalam storan tempatan seperti Cookie atau LocalStorage, dan kemudian biarkan halaman berikutnya membaca data ini dan menyahsulitnya. Ini memastikan bahawa parameter yang disulitkan hanya dipaparkan dalam storan setempat dan tidak terdedah kepada URL. Satu-satunya perkara yang perlu diberi perhatian ialah panjang parameter yang disulitkan hendaklah lebih kecil daripada panjang parameter plaintext, jika tidak, ia akan menyebabkan kuki dan ingatan lain menjadi terlalu besar.

Di atas ialah tiga cara untuk menyembunyikan parameter bar alamat dalam Vue.js. Tidak kira kaedah yang digunakan, kita perlu memastikan bahawa nilai parameter dalam URL disembunyikan sebanyak mungkin sambil memastikan keselamatan. Diakui, ini bukan perkara mudah, tetapi dalam perkembangan sebenar, isu ini sangat penting untuk beberapa data sensitif.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan parameter bar alamat dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!