Cara menggunakan fungsi pengesahan penghalaan dalam dokumen Vue

Vue ialah rangka kerja JavaScript yang sangat popular yang menyediakan mekanisme penghalaan yang sangat mudah dan mudah digunakan. Dalam Vue, kami boleh mengurus lompatan halaman dengan mentakrifkan laluan, tetapi dalam proses pembangunan sebenar, kami selalunya perlu mengesahkan laluan tertentu untuk memastikan pengguna hanya boleh mengakses halaman yang mereka mempunyai kebenaran. Artikel ini akan memperkenalkan cara menggunakan fungsi pengesahan penghalaan yang disediakan dalam dokumentasi Vue.

Apakah fungsi pengesahan penghalaan?

Fungsi pengesahan laluan ialah salah satu pengawal laluan global yang disediakan oleh Vue Ia boleh digunakan untuk mengesahkan sama ada pengguna mempunyai kebenaran untuk mengakses laluan tertentu. Fungsi pengesahan penghalaan perlu ditakrifkan dalam konfigurasi penghalaan dan akan dilaksanakan sebelum memasuki laluan tertentu. Jika fungsi pengesahan laluan kembali benar, ia bermakna pengguna mempunyai kebenaran untuk mengakses laluan dan boleh masuk secara normal, jika ia kembali palsu, ia bermakna pengguna tidak mempunyai kebenaran untuk mengakses laluan dan akan diubah hala ke; halaman lain atau mesej ralat akan dipaparkan.

Bagaimana untuk menentukan fungsi pengesahan penghalaan?

Dalam Vue, kita boleh menggunakan fungsi beforeEnter untuk mentakrifkan fungsi pengesahan penghalaan. Fungsi beforeEnter ialah fungsi yang ditakrifkan secara berasingan dalam konfigurasi penghalaan Ia menerima tiga parameter ke, dari dan seterusnya.

Parameter to mewakili objek penghalaan sasaran yang hendak dimasukkan, dari mewakili objek penghalaan semasa, dan seterusnya ialah fungsi yang digunakan untuk mengawal kelakuan lompatan penghalaan. Dalam fungsi beforeEnter, kita boleh menilai kebenaran pengguna dan memanggil fungsi seterusnya berdasarkan keputusan penghakiman untuk mengawal sama ada laluan perlu terus melompat.

Berikut ialah contoh kod untuk fungsi beforeEnter:

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (user.checkAdmin()) {
          next()
        } else {
          next('/login')
        }
      }
    }
  ]
})

Dalam kod di atas, kami mentakrifkan fungsi yang dinamakan beforeEnter dan menggunakannya sebagai fungsi beforeEnter bagi laluan Papan Pemuka. Apabila pengguna memasuki laluan /papan pemuka, Vue akan memanggil fungsi beforeEnter dan menghantar tiga parameter kepada, dari dan seterusnya.

Dalam fungsi beforeEnter, kami mula-mula memanggil fungsi yang dipanggil checkAdmin untuk mengesahkan sama ada pengguna ialah pentadbir. Jika pengguna ialah pentadbir, panggil fungsi seterusnya untuk membenarkan laluan melompat ke laluan /papan pemuka seperti biasa, jika tidak, panggil seterusnya('/log masuk') untuk mengubah hala pengguna ke halaman log masuk.

Perhatikan bahawa jika fungsi seterusnya tidak dipanggil, laluan akan disekat dan tidak akan melompat secara lalai.

Senario aplikasi fungsi pengesahan penghalaan

Fungsi pengesahan penghalaan sesuai untuk semua senario di mana kebenaran pengguna perlu disahkan. Contohnya:

1. Pengurusan kebenaran: Contohnya, pentadbir perlu mempunyai kebenaran pentadbir untuk mengakses halaman tertentu.
2. Pengesahan log masuk: Contohnya, apabila pengguna mengakses halaman tertentu yang memerlukan log masuk, mereka perlu melakukan pengesahan log masuk terlebih dahulu.
3. Pengesahan status akaun: Contohnya, apabila pengguna mengakses halaman tertentu yang memerlukan pembukaan akaun, mereka perlu mengesahkan sama ada akaun telah dibuka.

Ringkasan

Dalam Vue, fungsi pengesahan laluan adalah ciri yang sangat praktikal yang boleh digunakan untuk mengesahkan sama ada pengguna mempunyai kebenaran untuk mengakses laluan tertentu. Dengan mentakrifkan fungsi beforeEnter dan menilai kebenaran pengguna di dalamnya, fungsi pengesahan penghalaan boleh dilaksanakan dengan mudah.

Atas ialah kandungan terperinci Cara menggunakan fungsi pengesahan penghalaan dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!