Bagaimana untuk melaksanakan vue pengurusan kebenaran

Pengurusan kebenaran ialah syarat yang diperlukan untuk pelaksanaan banyak aplikasi, dan adalah penting untuk memastikan keselamatan data dan sistem. Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan web moden. Dalam artikel ini, kami akan membincangkan cara untuk melaksanakan pengurusan kebenaran menggunakan Vue. Kami akan meneroka dua kaedah pelaksanaan yang berbeza: pengurusan kebenaran berasaskan laluan dan pengurusan kebenaran berasaskan komponen.

Pengurusan kebenaran berasaskan penghalaan

Pengurusan kebenaran berasaskan penghalaan ialah kaedah pelaksanaan yang mudah dan berkesan. Penghala Vue ialah komponen penting dalam rangka kerja Vue, yang digunakan untuk mengendalikan penghalaan dalam aplikasi Vue. Kami boleh menggunakan beberapa ciri Penghala Vue untuk melaksanakan pengurusan kebenaran berasaskan penghalaan.

1. Cipta fail konfigurasi penghalaan

Kami boleh mencipta fail konfigurasi penghalaan dalam aplikasi Vue yang memetakan laluan URL ke komponen melalui Penghala Vue. Dalam fail ini, kita boleh menambah objek meta untuk setiap laluan untuk menyimpan maklumat kebenaran laluan. Sebagai contoh, kita boleh mentakrifkan objek meta sebagai:

{
  requiresAuth: true
}

2. Tambah pengesahan kebenaran untuk penghalaan

Untuk mengesahkan kebenaran pengguna, kami boleh menggunakan fungsi cangkuk navigasi disediakan oleh Vue Router beforeEach. Dalam fungsi beforeEach, kita boleh menyemak sama ada pengguna semasa mempunyai kebenaran untuk mengakses laluan. Jika pengguna tidak mempunyai kebenaran, kami boleh mengubah hala mereka ke halaman log masuk atau memaparkan halaman ralat tanpa keistimewaan.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

Dalam contoh ini, kami menyemak sama ada laluan memerlukan pengesahan, dan jika ya, semak sama ada pengguna telah log masuk. Jika pengguna log masuk, navigasi ke laluan baharu, sebaliknya ubah hala pengguna ke halaman log masuk dan lulus laluan asal sebagai parameter pertanyaan ke halaman log masuk.

3. Lakukan semakan kebenaran dalam komponen

Akhir sekali, dalam komponen, kita boleh mendapatkan maklumat meta laluan semasa dengan mengakses atribut $route. Kami boleh menggunakan maklumat meta ini untuk melaksanakan beberapa logik penghalaan khusus. Sebagai contoh, kita boleh memutuskan sama ada untuk memaparkan elemen tertentu dalam komponen atau menyekat pengguna daripada melakukan tindakan tertentu dalam komponen.

<template>
  <div>
    <h1 v-if="$route.meta.requiresAuth">Welcome to the Dashboard</h1>
    <button v-if="$route.meta.permissions.includes('edit')">Edit</button>
  </div>
</template>

Dalam komponen ini, kami akan memaparkan tajuk hanya jika laluan semasa memerlukan pengesahan, dan butang Edit hanya jika pengguna semasa mempunyai kebenaran mengedit. Ini adalah pelaksanaan yang mudah, tetapi ia boleh digunakan secara fleksibel pada banyak aplikasi.

Pengurusan kebenaran berasaskan komponen

Pengurusan kebenaran berasaskan komponen ialah satu lagi kaedah pelaksanaan yang biasa digunakan. Dalam pendekatan ini, setiap komponen mempunyai tahap kebenaran, dan hanya pengguna dengan kebenaran yang mencukupi boleh mengakses komponen tersebut.

1. Buat komponen kawalan kebenaran

Kami boleh mencipta komponen kawalan kebenaran khusus yang memutuskan sama ada untuk membuat subkomponen berdasarkan tahap kebenaran pengguna. Sebagai contoh, kita boleh mentakrifkan komponen sebagai:

<template>
  <div v-if="hasPermission">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    permissionLevel: {
      type: Number,
      required: true
    }
  },
  computed: {
    hasPermission () {
      return auth.user.permissionLevel >= this.permissionLevel
    }
  }
}
</script>

Dalam komponen ini, kami mentakrifkan atribut props yang dipanggil permissionLevel, yang menentukan tahap kebenaran yang diperlukan. Kami menggunakan harta yang dikira hasPermission untuk menyemak sama ada pengguna semasa mempunyai kebenaran yang mencukupi. Jika ya, kami menggunakan slot untuk memaparkan komponen kanak-kanak, jika tidak, kami tidak memberikan apa-apa.

2. Menggunakan komponen kawalan kebenaran dalam aplikasi

Kini, kita boleh menggunakan komponen kawalan kebenaran dalam aplikasi Vue. Kami boleh meletakkan komponen kawalan kebenaran dalam setiap komponen yang memerlukan akses dan menetapkan sifat permissionLevelnya kepada tahap kebenaran yang diperlukan oleh komponen. Sebagai contoh, kami boleh menambah kod berikut pada komponen Papan Pemuka:

<template>
  <div>
    <h1>Welcome to the Dashboard</h1>
    <permission-control :permission-level="2">
      <div>
        <p>You have access to the financial data.</p>
        <button>Edit financial data</button>
      </div>
    </permission-control>
  </div>
</template>

Dalam contoh ini, kami menetapkan atribut permissionLevel kepada 2, menunjukkan bahawa pengguna mesti mempunyai kebenaran lanjutan untuk mengakses komponen ini. Jika pengguna tidak mempunyai tahap kebenaran yang sesuai, tiada apa-apa dalam komponen Papan Pemuka akan dipaparkan.

Ringkasnya, kita dapat melihat bahawa Vue mempunyai banyak fungsi berguna untuk melaksanakan pengurusan kebenaran. Pengurusan kebenaran berasaskan laluan dan pengurusan kebenaran berasaskan komponen adalah kaedah pelaksanaan yang agak mudah dan biasa digunakan. Sudah tentu, melaksanakan pengurusan kebenaran adalah tugas yang kompleks dan kami perlu mempertimbangkan dengan teliti keperluan aplikasi dan memastikan keselamatan yang mencukupi dalam amalan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan vue pengurusan kebenaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!