Cara menggunakan vue guard

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri dan pilihan untuk membantu pembangun membuat aplikasi web responsif. Pengawal ialah konsep yang sangat penting dalam Vue Artikel ini akan membincangkan kegunaan asas dan kes pengawal Vue.

Gambaran Keseluruhan Vue Guard

Dalam Vue, pengawal ialah fungsi yang boleh mendengar peristiwa kitaran hayat laluan dan komponen. Apabila peristiwa ini dicetuskan, pengawal boleh melakukan tindakan seperti mengesahkan kebenaran pengguna, menyalin dan memeriksa data masuk, dsb. Pengawal Vue terbahagi kepada dua kategori: pengawal global dan pengawal laluan Perbezaan utama antara mereka terletak pada objek yang mereka pantau.

Pengawal global

Pengawal global dikaitkan dengan kitaran hayat aplikasi Vue. Mereka boleh melakukan beberapa operasi apabila setiap tika Vue dibuat, dimusnahkan, dikemas kini atau dipasang. Pengawal global termasuk empat fungsi cangkuk berikut:

1. beforeCreate: dipanggil selepas tika Vue dimulakan, tetapi sebelum pemerhatian data dan konfigurasi acara acara/pemerhati. Fungsi cangkuk ini adalah masa yang baik untuk memulakan data/keadaan peringkat komponen.
2. dibuat: Dipanggil selepas tika Vue dibuat Pada masa ini, tika komponen tidak dipasang dalam DOM. Anda boleh melakukan beberapa operasi tak segerak dalam fungsi cangkuk ini, tetapi tidak disyorkan untuk mengubah suai data keadaan komponen di dalamnya.
3. beforeMount: Dipanggil sebelum contoh Vue dipasang ke dalam elemen DOM Pada masa ini, templat komponen telah disusun ke dalam rentetan HTML, tetapi belum lagi dimasukkan ke dalam DOM.
4. dilekapkan: Dipanggil selepas tika Vue dipasang pada elemen DOM. Anda boleh mengakses elemen DOM dan melakukan operasi lain dalam fungsi cangkuk ini, seperti memulakan pemalam pihak ketiga, dsb.

Pengawal Laluan

Pengadang laluan ialah fungsi cangkuk yang dicetuskan apabila aplikasi menavigasi ke laluan tertentu. Mereka boleh memantau sejarah akses laluan, menyemak sama ada pengguna mempunyai kebenaran untuk mengakses laluan tertentu, mengendalikan pemuatan data tak segerak dan operasi lain. Pengawal laluan Vue termasuk enam fungsi cangkuk berikut:

1. beforeRouteEnter: dipanggil sebelum laluan memasuki komponen. Contoh komponen boleh diakses dalam fungsi cangkuk ini, tetapi data keadaan dan kaedah contoh dalam komponen tidak boleh diakses.
2. beforeRouteUpdate: Dipanggil apabila laluan dikemas kini. Biasanya digunakan untuk mengendalikan operasi seperti pemuatan data tak segerak.
3. beforeRouteLeave: Dipanggil apabila laluan meninggalkan komponen. Anda boleh menggunakan pengawal untuk mengesahkan input pengguna atau memberi amaran kepada pengguna tentang perubahan yang belum disimpan.
4. beforeEach: Dipanggil sebelum menavigasi ke laluan baharu. Anda boleh menyemak kebenaran pengguna, mengendalikan pemuatan data tak segerak dan operasi lain dalam fungsi cangkuk ini.
5. afterEach: Dipanggil selepas navigasi selesai. Ralat yang berlaku semasa navigasi boleh dikendalikan dalam fungsi cangkuk ini.
6. onError: Dipanggil apabila terdapat ralat dalam navigasi laluan. Pengecualian seperti kegagalan permintaan dan ralat rangkaian boleh dikendalikan dalam fungsi cangkuk ini.

Menggunakan Vue guards

Vue guards sangat penting dalam pembangunan sebenar Ia boleh digunakan untuk mengendalikan logik perniagaan dalam pelbagai senario. Di bawah ini kami menggunakan contoh untuk menunjukkan penggunaan asas pengawal Vue.

Andaikan terdapat halaman yang memerlukan pengguna log masuk untuk mengakses Apabila pengguna tidak log masuk, dia perlu dialihkan ke halaman log masuk. Kita boleh menggunakan beforeEach guard untuk mencapai fungsi ini. Mula-mula tentukan tatasusunan penghalaan:

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

Dalam konfigurasi penghalaan, kami menentukan laluan /profile yang memerlukan log masuk untuk mengakses dan menandakannya sebagai memerlukan pengesahan melalui maklumat meta penghalaan. Seterusnya, tambahkan fungsi cangkuk beforeEach dalam fail router.js:

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/login');   //如果需要登录并且用户未登录，则重定向到登录页面
  } else {
    next();   //否则允许导航到目标路由
  }
});

Dalam fungsi sebelumSetiap cangkuk, kita mula-mula mendapatkan objek pengguna semasa currentUser, dan kemudian gunakan atribut requireAuth untuk menentukan sama ada laluan sasaran memerlukan log masuk untuk mengakses. Jika log masuk diperlukan dan pengguna semasa tidak log masuk, ubah hala ke halaman log masuk. Jika tidak, benarkan navigasi ke laluan sasaran (menggunakan kaedah next() untuk membenarkan navigasi).

Kesimpulan

Vue guard ialah konsep yang sangat penting dalam rangka kerja Vue Ia boleh digunakan untuk memantau peristiwa kitaran hayat penghalaan dan komponen, dan melakukan beberapa operasi apabila peristiwa ini dicetuskan. seperti mengesahkan Keizinan, menyalin dan memeriksa data masuk, dsb. Artikel ini memperkenalkan pengetahuan asas pengawal global dan pengawal laluan, dan menyediakan contoh untuk menunjukkan penggunaan asas pengawal Vue Ia bertujuan untuk membolehkan pembangun memahami dan menggunakan pengawal Vue dengan lebih baik, dan menggunakan sepenuhnya peranan mereka dalam pembangunan sebenar.

Atas ialah kandungan terperinci Cara menggunakan vue guard. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!