Bincangkan kaedah kebenaran untuk aplikasi satu halaman Vue

Vue ialah rangka kerja bahagian hadapan untuk membangunkan aplikasi satu halaman (SPA), yang boleh membantu pembangun membina pengalaman pengguna yang cekap, lancar dan interaktif. Walau bagaimanapun, keizinan juga merupakan isu penting apabila membangunkan aplikasi satu halaman Vue, kerana hanya pengguna yang dibenarkan boleh mengakses bahagian tertentu halaman. Dalam artikel ini, kami akan membincangkan kaedah kebenaran permohonan satu halaman Vue.

1. Keizinan berasaskan penghalaan

Fungsi penghalaan Vue boleh membenarkan halaman berdasarkan peranan dan kebenaran pengguna setiap kali halaman dimuatkan. Pertama, anda perlu mengkonfigurasi penghalaan dalam aplikasi Vue anda. Laluan ialah objek JavaScript yang mengandungi URL dan komponen yang mentakrifkan dan sepadan dengan laluan. Anda boleh menggunakan pengawal navigasi dalam penghala untuk melaksanakan kebenaran.

Pengadang navigasi ialah satu set fungsi cangkuk yang digunakan untuk mengendalikan penghalaan. Fungsi cangkuk beforeEach membantu anda memberi kebenaran kepada pengguna sebelum mereka menavigasi ke laluan baharu.

Andaikan aplikasi Vue anda mempunyai dua peranan pengguna: pengguna biasa dan pentadbir. Hanya pentadbir boleh mengakses halaman pentadbir. Anda perlu menambah atribut isAdmin pada konfigurasi penghalaan anda.

const routes = [
  {
    path: '/user',
    component: UserComponent
  },
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true, isAdmin: true }
  },
  {
    path: '/login',
    component: LoginComponent
  }
];

Dalam kod di atas, kami menetapkan sifat meta.requiresAuth dan meta.isAdmin. requireAuth bermakna pengesahan diperlukan untuk mengakses, dan isAdmin bermakna hanya pentadbir boleh mengakses halaman tersebut.

Sekarang, tambah sebelumSetiap fungsi cangkuk dalam penghala Vue untuk menyemak sama ada pengguna mempunyai peranan dan kebenaran yang diperlukan.

router.beforeEach((to, from, next) => {
  const currentUser = auth.currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAdmin = to.matched.some(record => record.meta.isAdmin)
  
  if(requiresAuth && !currentUser) next('/login')
  else if(isAdmin && currentUser.role !== 'admin') next('/user')
  else next()
})

2. Keizinan berasaskan komponen

Jika anda ingin memberi kebenaran dalam komponen Vue, anda boleh menggunakan fungsi cangkuk kitaran hayat Vue, seperti dicipta dan dipasang.

Fungsi cangkuk yang dicipta bagi komponen boleh membantu anda menyemak peranan dan kebenaran pengguna apabila komponen dibuat.

created() {
  const currentUser = auth.currentUser
  const isAdmin = this.$route.meta.isAdmin
  
  if(isAdmin && currentUser.role !== 'admin') this.$router.push('/user')
}

Dalam kod di atas, kami menyemak atribut isAdmin dan peranan pengguna semasa apabila komponen dibuat Jika pengguna bukan pentadbir, ia akan mengubah hala secara automatik ke halaman pengguna.

Dan fungsi yang dipasang boleh membantu anda menyemak peranan dan kebenaran selepas pemaparan halaman selesai.

mounted() {
  const currentUser = auth.currentUser
  const isAdmin = this.$route.meta.isAdmin
  
  if(isAdmin && currentUser.role !== 'admin') this.showAdminPanel = false
  else this.showAdminPanel = true
}

Dalam kod di atas, kami menyemak atribut isAdmin dan peranan pengguna semasa selepas halaman dipaparkan Jika pengguna bukan pentadbir, panel pentadbir akan disembunyikan.

Ringkasan

Melaksanakan kebenaran dalam aplikasi satu halaman Vue memerlukan penggunaan fungsi penghalaan dan pengawal navigasi. Keizinan berasaskan laluan membolehkan anda membenarkan halaman setiap kali ia dimuatkan, manakala keizinan berasaskan komponen membolehkan anda memberi kebenaran kepada pengguna selepas halaman tersebut selesai dipaparkan. Tidak kira kaedah kebenaran yang anda pilih, anda perlu melaksanakannya dengan pertimbangan terperinci tentang keperluan dan ciri aplikasi Vue semasa anda.

Atas ialah kandungan terperinci Bincangkan kaedah kebenaran untuk aplikasi satu halaman Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!