Pengesahan keselamatan aplikasi web adalah penting. Ia membolehkan pengalaman diperibadikan, memuat kandungan khusus pengguna (seperti status log masuk), dan juga boleh digunakan untuk menilai kebenaran untuk mengelakkan pengguna yang tidak dibenarkan daripada mengakses maklumat peribadi.

Aplikasi biasanya melindungi kandungan dengan meletakkan kandungan di bawah laluan tertentu dan peraturan pengalihan bangunan, mengarahkan pengguna untuk mengakses atau jauh dari sumber berdasarkan keizinan mereka. Untuk meletakkan kandungan di belakang laluan yang dilindungi, halaman statik bebas perlu dibina. Dengan cara ini, peraturan pengalihan boleh mengendalikan pengalihan dengan betul.

Untuk aplikasi halaman tunggal (SPA) yang dibina dengan rangka kerja depan moden seperti VUE, peraturan redirect tidak boleh digunakan untuk melindungi penghalaan. Kerana semua halaman datang dari satu fail entri, dari sudut pandang penyemak imbas, hanya ada satu halaman: index.html. Di Spa, logik penghalaan biasanya berasal dari fail penghalaan. Artikel ini akan mengkonfigurasi pengesahan di sini. Kami secara khusus akan bergantung kepada pengawal navigasi Vue untuk mengendalikan laluan khusus pengesahan, kerana ini membantu kami mengakses laluan terpilih sebelum laluan dihuraikan sepenuhnya. Mari menggali bagaimana ia berfungsi.

Asas penghalaan

Pengawal Navigasi adalah ciri khusus dalam Vue Router yang menyediakan ciri -ciri tambahan tentang bagaimana penghalaan menyelesaikan. Mereka digunakan terutamanya untuk mengendalikan keadaan ralat dan membimbing pengguna dengan lancar tanpa secara tiba -tiba mengganggu aliran kerja mereka.

Terdapat tiga kategori utama pengawal di Vue Router: Pengawal Global, Pengawal Eksklusif Router dan Pengawal Komponen. Seperti namanya, pengawal global dipanggil apabila mencetuskan sebarang navigasi (iaitu apabila URL berubah), pengawal eksklusif laluan dipanggil apabila memanggil laluan yang berkaitan (iaitu apabila URL sepadan dengan laluan tertentu), dan pengawal komponen dipanggil apabila membuat, mengemas kini, atau memusnahkan komponen di laluan. Dalam setiap kategori, terdapat cara lain untuk memberi anda lebih banyak kawalan berbutir ke atas penghalaan aplikasi. Berikut adalah pecahan cepat semua kaedah yang terdapat dalam setiap pengawal navigasi di Vue Router.

Pengawal Global

• beforeEach : operasi sebelum memasuki sebarang laluan (skop ini tidak dapat diakses)
• beforeResolve : Tindakan Sebelum Pengesahan Navigasi, tetapi selepas Pengawal Komponen (Sama seperti sebelum ini, dengan akses ke skop ini)
• afterEach : Operasi selepas resolusi penghalaan (tidak dapat menjejaskan navigasi)

Pengawal eksklusif laluan

• beforeEnter : Operasi sebelum memasuki laluan tertentu (tidak seperti pengawal global, pengawal ini dapat mengaksesnya)

Pengawal Komponen

• beforeRouteEnter : Tindakan dilakukan sebelum pengesahan navigasi dan sebelum penciptaan komponen (ini tidak dapat diakses)
• beforeRouteUpdate : Operasi yang dilakukan selepas memanggil laluan baru menggunakan komponen yang sama
• beforeRouteLeave : Operasi sebelum meninggalkan laluan

Melindungi penghalaan

Untuk melaksanakannya dengan berkesan, adalah berguna untuk mengetahui bila menggunakannya dalam mana -mana senario yang diberikan. Sebagai contoh, jika anda ingin menjejaki pandangan halaman untuk analisis, anda mungkin mahu menggunakan Global Aftereach Guard kerana ia dicetuskan selepas laluan dan komponen yang berkaitan dihuraikan sepenuhnya. Jika anda ingin prefetch data ke dalam penyimpanan VUEX sebelum parsing laluan, anda boleh menggunakan Pengawal Eksklusif Laluan Lastin untuk berbuat demikian.

Oleh kerana contoh kami berkaitan dengan melindungi laluan tertentu berdasarkan hak akses pengguna, kami akan menggunakan pengawal komponen, iaitu, cangkuk sebelumnya. Pengawal navigasi ini membolehkan kami mengakses laluan yang betul sebelum parsing selesai; Ini bermakna kita boleh mendapatkan data atau periksa sama ada data dimuatkan sebelum membenarkan pengguna lulus. Sebelum menggali butiran pelaksanaan bagaimana ia berfungsi, mari kita lihat secara ringkas bagaimana cangkuk sebelum ini dimasukkan ke dalam fail penghalaan sedia ada kami. Di bawah ini adalah fail penghalaan sampel kami yang mengandungi laluan yang dilindungi kami, dengan tepat bernama dilindungi. Kami akan menambah cangkuk sebelum ini seperti berikut:

 const router = vuerouter baru ({
  Laluan: [
    …
    {
      Laluan: "/dilindungi",
      Nama: "dilindungi",
      Komponen: Import (/ * WebPackChunkName: "dilindungi" */'./protected.vue'),
      sebelum ini (dari, dari, seterusnya) {
        // logik di sini}
    }
  ]
})

Struktur penghalaan

Struktur sebelum ini tidak berbeza dengan pengawal navigasi lain yang terdapat di Vue Router. Ia menerima tiga parameter: to , laluan "masa depan" yang mana permohonan itu menavigasi; from , laluan "masa lalu/masa lalu" yang mana permohonan itu pergi; next , fungsi yang mesti dipanggil untuk membuat laluan menyelesaikan dengan jayanya.

Umumnya, apabila menggunakan Vue Router, seterusnya dipanggil tanpa sebarang hujah. Walau bagaimanapun, ini menganggap keadaan kejayaan yang kekal. Dalam kes kami, kami ingin memastikan bahawa pengguna yang tidak dibenarkan tidak dapat mengakses sumber yang dilindungi dan terdapat laluan alternatif yang boleh diarahkan dengan betul. Untuk melakukan ini, kami akan lulus parameter ke seterusnya. Untuk melakukan ini, kami akan menggunakan nama laluan untuk menavigasi pengguna, jika mereka tidak dibenarkan, ia kelihatan seperti ini:

 Seterusnya ({
  Nama: "Dashboard"
})

Mari kita anggap dalam contoh kami, kami mempunyai kedai VUEX di mana kami menyimpan token kebenaran pengguna. Untuk memeriksa sama ada pengguna mempunyai kebenaran, kami akan menyemak kedai ini dan gagal dengan sewajarnya atau melalui laluan.

 sebelum ini (dari, dari, seterusnya) {
  // periksa penyimpanan vuex //
  jika (store.getters ["auth/haspermission"]) {
    Seterusnya ()
  } else {
    Seterusnya ({
      Nama: "Dashboard" // Kembali ke Route Secure //
    });
  }
}

Untuk memastikan bahawa peristiwa berlaku secara serentak dan laluan itu tidak dimuatkan sebelum operasi VUEX selesai, mari kita menukar pengawal navigasi untuk menggunakan async/menunggu.

 Async sebelum ini (kepada, dari, seterusnya) {
  Cuba {
    var haspermission = Await Store.disPatch ("Auth/Haspermission");
    jika (haspermission) {
      Seterusnya ()
    }
  } menangkap (e) {
    Seterusnya ({
      Nama: "Dashboard" // Kembali ke Route Secure //
    })
  }
}

Ingat sumbernya

Setakat ini, pengawal navigasi kami telah mencapai tujuan mereka untuk menghalang mereka daripada mengakses sumber yang dilindungi dengan mengalihkan pengguna yang tidak dibenarkan ke mana mereka mungkin dari (iaitu, halaman papan pemuka). Walaupun begitu, aliran kerja sedemikian merosakkan. Oleh kerana pengalihan tidak dijangka, pengguna mungkin berfikir ia adalah ralat pengguna dan cuba mengakses laluan berulang kali, akhirnya berfikir bahawa aplikasi itu rosak. Untuk menyelesaikan masalah ini, mari buat kaedah untuk memberitahu pengguna kapan dan mengapa mereka diarahkan.

Kita boleh melakukan ini dengan lulus parameter pertanyaan ke fungsi seterusnya. Ini membolehkan kita melampirkan laluan sumber yang dilindungi ke URL redirect. Oleh itu, jika anda ingin meminta pengguna untuk log masuk ke aplikasi atau mendapatkan kebenaran yang betul tanpa mengingati di mana mereka berhenti, anda boleh melakukannya. Kami boleh mengakses laluan sumber yang dilindungi melalui objek Laluan yang dihantar ke fungsi sebelumnya, seperti yang ditunjukkan di bawah: to.fullpath.

 Async sebelum ini (kepada, dari, seterusnya) {
  Cuba {
    var haspermission = Await Store.disPatch ("Auth/Haspermission");
    jika (haspermission) {
      Seterusnya ()
    }
  } menangkap (e) {
    Seterusnya ({
      Nama: "Login", // Kembali ke Route Secure //
      pertanyaan: {redirectFrom: to.fullpath}
    })
  }
}

memberitahu

Langkah seterusnya dalam meningkatkan aliran kerja untuk pengguna untuk tidak mempunyai akses kepada laluan yang dilindungi adalah untuk menghantar mesej kepada mereka untuk memberitahu mereka tentang kesilapan dan bagaimana menyelesaikan masalah (dengan log masuk atau mendapatkan kebenaran yang betul). Untuk melakukan ini, kita boleh menggunakan pengawal komponen, terutamanya BeforerouteEnter, untuk memeriksa sama ada pengalihan telah berlaku. Oleh kerana kami lulus laluan redirect sebagai parameter pertanyaan ke fail penghalaan kami, kini kami boleh menyemak objek penghalaan untuk melihat apakah redirect telah berlaku.

 BeForerOuteEnter (kepada, dari, seterusnya) {
  jika (to.query.redirectFrom) {
    // buat sesuatu //
  }
}

Seperti yang saya nyatakan sebelum ini, semua pengawal navigasi mesti memanggil di sebelah untuk membuat penyelesaian laluan. Seperti yang kita lihat sebelum ini, kelebihan fungsi seterusnya ialah kita boleh lulus objek kepadanya. Apa yang anda tidak tahu ialah anda juga boleh mengakses contoh Vue dalam fungsi seterusnya. Wow! Inilah yang kelihatan seperti:

 seterusnya (() => {
  console.log (ini) // ini adalah contoh vue})

Anda mungkin menyedari bahawa apabila menggunakan sebelumnya, anda tidak mengakses skop ini secara teknikal . Walaupun ini mungkin berlaku, anda masih boleh mengakses contoh VUE dengan lulus VM ke fungsi, seperti itu:

 seterusnya (vm => {
  console.log (vm) // ini adalah contoh vue})

Ini amat mudah kerana kini anda boleh dengan mudah membuat dan mengemas kini sifat data dengan betul dengan mesej ralat yang berkaitan tanpa sebarang konfigurasi tambahan. Menggunakan kaedah ini, anda akan mendapat komponen seperti ini:

<template><div>
    {{errormsg}}

    …

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "對不起，您沒有訪問請求路由的權限"
      })
    } else {
      next()
    }
  }
}
</script>

kesimpulannya

Proses mengintegrasikan pengesahan ke dalam aplikasi anda boleh menjadi rumit. Kami menerangkan bagaimana untuk mencegah pengguna yang tidak dibenarkan daripada mengakses laluan dan bagaimana untuk membina aliran kerja berdasarkan keizinan pengguna untuk mengalihkan pengguna ke atau jauh dari sumber yang dilindungi. Setakat ini, andaian kami adalah bahawa anda telah mengkonfigurasi pengesahan dalam permohonan anda. Sekiranya anda belum mengkonfigurasinya, dan anda ingin mendapatkannya dan berjalan dengan cepat, saya sangat mengesyorkan menggunakan pengesahan sebagai perkhidmatan. Terdapat beberapa penyedia seperti widget pengesahan Netlify atau kunci Auth0.

Atas ialah kandungan terperinci Melindungi laluan Vue dengan pengawal navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!