Senarai kawalan akses dan pengurusan kebenaran dalam projek Vue

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue, sebagai jenis rangka kerja bahagian hadapan yang baharu, telah digunakan secara meluas dalam banyak projek. Walau bagaimanapun, dalam kebanyakan senario aplikasi praktikal, kawalan akses pengguna adalah tugas yang sangat penting. Oleh itu, artikel ini akan menumpukan pada teknologi untuk melaksanakan senarai kawalan akses (ACL) dan pengurusan kebenaran dalam projek Vue.

1. Apakah itu senarai kawalan akses?

Senarai kawalan akses (ACL) merujuk kepada senarai pengguna atau kumpulan pengguna yang digunakan untuk mengehadkan akses kepada pelbagai sumber sistem (seperti fail, direktori atau sambungan rangkaian). Dalam projek Vue, ACL biasanya digunakan untuk menyekat hak akses peranan pengguna yang berbeza kepada halaman yang berbeza atau modul berfungsi tertentu dalam halaman.

2. Bagaimana untuk melaksanakan senarai kawalan akses?

Dalam projek Vue, anda boleh menggunakan fungsi Pengawal Navigasi Penghala Vue untuk melaksanakan ACL. Pengawal navigasi ialah mekanisme yang disediakan oleh Penghala Vue yang membolehkan pembangun memintas navigasi laluan dan dengan itu mengawal navigasi. Berikut ialah contoh:

router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('userRole');
  if (!role && to.path !== '/login') {
    next('/login');
  } else if (to.meta.permission && !to.meta.permission.includes(role)) {
    next('/403');
  } else {
    next();
  }
});

Dalam kod ini, kami menggunakan kaedah beforeEach untuk mendaftarkan pengawal navigasi global. Pengawal navigasi ini dicetuskan setiap kali pengguna menavigasi antara halaman. Kami boleh menggunakan localStorage untuk mendapatkan peranan pengguna semasa untuk menentukan sama ada pengguna mempunyai kebenaran untuk mengakses halaman. Jika pengguna tidak log masuk, lompat ke halaman log masuk jika pengguna log masuk tetapi tidak mempunyai kebenaran untuk mengakses halaman, lompat ke halaman 403 jika tidak, biarkan pengguna terus mengakses halaman;

Perlu diambil perhatian bahawa kami boleh mengkonfigurasi keperluan kebenaran yang sepadan untuk setiap laluan melalui medan meta dalam konfigurasi penghalaan, seperti:

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    permission: ['admin', 'editor']
  }
}

Dalam contoh ini, kami mengkonfigurasi Dashboard halaman hanya boleh diakses oleh pengguna dengan dua peranan admin dan editor.

3. Apakah itu pengurusan kebenaran?

Selain daripada senarai kawalan akses, kami juga memerlukan alat yang mudah untuk mengurus peranan dan kebenaran pengguna. Oleh itu, kami memerlukan alat pengurusan kebenaran. Dalam projek Vue, anda boleh menggunakan beberapa alatan pengurusan kebenaran sedia ada, seperti Vue-Access-Control dan Vue-Auth, dsb.

Di sini, kami mengambil alat Vue-Access-Control sebagai contoh untuk memperkenalkan secara ringkas cara menggunakan alat ini untuk pengurusan kebenaran. Mula-mula, kita perlu memasang Vue-Access-Control:

npm install vue-access-control --save

Seterusnya, konfigurasikannya dalam fail masukan projek Vue:

import VueAccessControl from 'vue-access-control';

Vue.use(VueAccessControl, {
  roles: ['admin', 'editor'],
  defaultRole: 'editor'
});

Vue.accessControl.setAlias('isAdmin', 'admin');
Vue.accessControl.setAlias('isEditor', 'editor');

Di sini, kami mula-mula memberitahu Vue melalui Vue.use Kepada gunakan Vue-Access-Control pemalam ini. Kemudian, kami menentukan dua peranan dalam konfigurasi, iaitu admin dan editor. Kami juga menentukan alias untuk peranan melalui kaedah setAlias, yang memudahkan kami menggunakan peranan dalam kod.

Akhir sekali, pada halaman, kita boleh menggunakan arahan v-if dan kaedah can untuk mengawal kebenaran:

<template>
  <div>
    <h2 v-if="can('isAdmin')">
      增加管理员
    </h2>
    <button v-if="can('isEditor')" @click="edit">编辑文章</button>
  </div>
</template>

Dalam contoh ini, kami menggunakan arahan v-if untuk menentukan Sama ada pengguna semasa mempunyai kebenaran yang sepadan dinilai menggunakan kaedah can. Jika pengguna mempunyai kebenaran, elemen yang sepadan dipaparkan jika tidak, elemen itu tidak diberikan.

Ringkasnya, tidak sukar untuk melaksanakan senarai kawalan akses dan pengurusan kebenaran dalam projek Vue. Kami boleh menggunakan pengawal navigasi Vue Router untuk melaksanakan ACL dan menggabungkannya dengan alatan pengurusan kebenaran sedia ada, seperti Vue-Access-Control, dsb., untuk memenuhi keperluan pengurusan kebenaran. Dengan cara ini, kami boleh memastikan pembangunan dan penggunaan dalam persekitaran yang selamat dan boleh dipercayai.

Atas ialah kandungan terperinci Senarai kawalan akses dan pengurusan kebenaran dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!