Mari kita bincangkan tentang cara menyembunyikan parameter penghalaan Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk pembangunan bahagian hadapan. Vue Router ialah alat pengurusan penghalaan rasminya, yang membolehkan pembangun melaksanakan fungsi penghalaan SPA (Aplikasi Halaman Tunggal) dengan mudah. Dalam Penghala Vue, kami biasanya menggunakan parameter penghalaan untuk menukar halaman secara dinamik. Walau bagaimanapun, dalam beberapa senario tertentu, kami mungkin perlu menyembunyikan dan menyulitkan parameter penghalaan. Artikel ini akan memperkenalkan anda kepada cara menyembunyikan parameter penghalaan dalam Vue.

1. Penggunaan asas parameter penghalaan

Dalam Penghala Vue, parameter penghalaan ditakrifkan dengan menggunakan awalan bertindih, contohnya:

{ path: '/user/:id', component: User }

Dalam kod di atas, kami Parameter penghalaan bernama "id" ditakrifkan, yang boleh memaparkan maklumat pengguna yang sepadan secara dinamik apabila pengguna mengakses "/user/1". Dalam komponen, kita boleh mengakses nilai parameter penghalaan semasa melalui $route.params, contohnya:

const User = {
  template: '<div>{{ $route.params.id }}</div>'
}

2. Menyembunyikan parameter penghalaan

Dalam pembangunan sebenar, kadangkala kita I berharap untuk menyembunyikan parameter penghalaan, seperti menyulitkan ID pengguna. Ini boleh meningkatkan keselamatan sistem dan menghalang pengguna daripada mengakses data orang lain dengan mengganggu parameter URL. Untuk merealisasikan fungsi menyembunyikan parameter routing, kita boleh menggunakan fungsi "Path Parameter Rewrite (Rewrite)" yang disediakan oleh Vue Router. Secara khusus, kita boleh mentakrifkan semula nilai parameter penghalaan dengan menambah fungsi beforeEnter dalam konfigurasi penghalaan, contohnya:

{ 
  path: '/user/:id', 
  component: User,
  beforeEnter: (to, from, next) => {
    // 将id进行加密
    const id = encrypt(to.params.id)
    next({ path: `/user/${id}` })
  }
}

Dalam kod di atas, kami mentakrifkan fungsi bernama "beforeEnter", Ia akan menjadi dipanggil sebelum pengguna mengakses laluan. Dalam fungsi ini, kami menyulitkan parameter penghalaan asal dan mengubah suai laluan laluan lompat ke nilai laluan yang disulitkan melalui fungsi seterusnya, dengan itu menyembunyikan parameter penghalaan.

3. Penyahsulitan parameter penghalaan

Apabila parameter penghalaan disembunyikan, kita perlu menyahsulit parameter penghalaan dalam komponen untuk mendapatkan nilai parameter sebenar. Untuk mencapai fungsi ini, kami boleh menyahsulit parameter penghalaan dalam fungsi kitaran hayat yang dicipta komponen, contohnya:

const User = {
  template: '<div>{{ realId }}</div>',
  data() {
    return {
      realId: ''
    }
  },
  created() {
    // 获取加密后的id路由参数
    const id = this.$route.params.id
    // 解密id
    this.realId = decrypt(id)
  }
}

Dalam kod di atas, kami memperoleh laluan yang disulitkan melalui parameter fungsi kitaran hayat yang dicipta , dan tukarkannya kepada parameter sebenar melalui fungsi penyahsulitan, dan simpan nilai yang dinyahsulit dalam realId pemboleh ubah contoh komponen. Dalam templat, kita boleh memaparkan nilai parameter penghalaan sebenar melalui pembolehubah realId.

4. Ringkasan

Dengan menggunakan fungsi penulisan semula parameter laluan, kami boleh menyembunyikan dan menyahsulit parameter penghalaan Vue dengan mudah. Teknologi ini boleh meningkatkan keselamatan sistem dan mengelakkan masalah yang tidak perlu. Dalam pembangunan sebenar, kami juga boleh menggabungkan kuki, sesi dan teknologi lain untuk meningkatkan lagi keselamatan sistem.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menyembunyikan parameter penghalaan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!