Penjelasan terperinci tentang cara vue melaksanakan kawalan kebenaran penghalaan

Vue ialah salah satu rangka kerja bahagian hadapan yang sangat popular pada masa kini Berbanding dengan kaedah pemaparan halaman tradisional, Vue memberi lebih perhatian kepada pengurusan penghalaan bahagian hadapan. Dalam projek sebenar, kebenaran akses penghalaan bahagian hadapan juga merupakan isu yang sangat penting. Jadi, bagaimana untuk melaksanakan kawalan kebenaran penghalaan dalam Vue?

Dalam Vue, terdapat dua cara utama untuk melaksanakan kawalan kebenaran penghalaan: satu ialah mengawalnya di bahagian hadapan, iaitu, menjana jadual penghalaan secara dinamik mengikut kebenaran pengguna yang berbeza; hujung belakang Antara muka dikawal, iaitu hujung hadapan memulakan permintaan ke hujung belakang dan menjana jadual penghalaan yang sepadan berdasarkan maklumat kebenaran yang dikembalikan.

1. Kaedah kawalan bahagian hadapan

Dalam kaedah kawalan bahagian hadapan, kami boleh melaksanakan kawalan kebenaran penghalaan melalui langkah berikut:

1.1 Dalam konfigurasi penghalaan Konfigurasi dalam fail

Dalam Vue, kami biasanya mencipta fail router di bawah folder index.js dan pelbagai maklumat penghalaan akan dikonfigurasikan dalam fail. Apabila melaksanakan kawalan kebenaran penghalaan, kami boleh mengkonfigurasi maklumat meta penghalaan dalam fail ini untuk menyimpan maklumat kebenaran penghalaan.

Sebagai contoh, kami boleh menentukan laluan yang perlu mengawal akses berdasarkan kebenaran pengguna:

{
  path: '/admin',
  name: 'admin',
  component: () => import('@/views/Admin.vue'),
  meta: { requiresAuth: true }
},

Dalam konfigurasi penghalaan ini, kami mentakrifkan requiresAuth >Atribut yang digunakan untuk menandakan ini sebagai laluan yang memerlukan kebenaran kawalan. meta

1.2 Kawalan dalam pemintas laluan

Pemintas sebenarnya ialah sekeping kod yang digunakan untuk memintas permintaan dan melakukan operasi tertentu dalam keadaan tertentu tertentu. Dalam Vue, kita boleh menggunakan kaedah

untuk memintas permintaan penghalaan dan melaksanakan kawalan kebenaran. beforeEach

Sebagai contoh, kita boleh mentakrifkan kaedah

seperti ini: beforeEach

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

Dalam pemintas ini, kami menilai laluan yang perlu diakses pada masa ini dan yang ditakrifkan sebelum ini

atribut. Tentukan sama ada kawalan kebenaran diperlukan. Jika perlu, kami akan melaksanakan kawalan akses berdasarkan status log masuk pengguna dan maklumat lain, dan melompat ke halaman yang ditentukan apabila perlu. meta

Kaedah kawalan backend

Dalam kaedah kawalan backend, kita perlu mendapatkan maklumat kebenaran pengguna yang dikembalikan dengan menghantar permintaan ke backend, dan kemudian menjana jadual penghalaan Menjalankan kawalan yang sepadan apabila perlu.

Sebagai contoh, jika bahagian belakang berasaskan JWT mengembalikan

, laluan ini memerlukan kebenaran pentadbir untuk mengakses Kami boleh mendapatkan maklumat kebenaran pengguna seperti ini: /admin

const response = await axios.get('/user');
const permissions = response.data.permissions;

Selepas mendapat Selepas. memberikan maklumat kebenaran pengguna, kami boleh menggunakan penjanaan laluan dinamik Vue Router dan fungsi lain untuk menjana jadual penghalaan secara dinamik.

Sebagai contoh, kita boleh mentakrifkan fungsi yang menjana jadual penghalaan secara dinamik seperti ini:

function generateRoutesFromMenu (menu = [], permissions = {}) {
  const routes = []

  for (let i = 0, l = menu.length; i < l; i++) {
    const item = menu[i]
    const route = {
      path: item.path,
      name: item.name,
      meta: item.meta, // 从菜单项中提取出路由的meta信息
      component: item.component ? loadView(item.component) : null,
      children: item.children ? generateRoutesFromMenu(item.children, permissions) : []
    }

    // 如果路由需要控制权限
    if (route.meta && route.meta.requiresAuth) {
      // 判断用户是否有权限访问该路由
      if (permissions[route.meta.permissionKey]) {
        // 用户有权限，则把该路由加入到路由表中
        routes.push(route)
      }
    } else {
      // 如果不需要权限控制，则直接加入到路由表中
      routes.push(route)
    }
  }

  return routes
}

Dalam fungsi ini, kita dapat melihat bahawa kita mentakrifkan atribut

dalam menu item Untuk menandakan laluan mana yang memerlukan kawalan kebenaran. Apabila menjana jadual penghalaan, kami menentukan sama ada laluan ini perlu ditambahkan pada jadual penghalaan berdasarkan maklumat kebenaran pengguna. Jika kawalan kebenaran tidak diperlukan, kami boleh menambahkannya terus ke jadual penghalaan. meta

Ringkasnya, terdapat dua cara utama untuk melaksanakan kawalan kebenaran penghalaan dalam Vue: satu ialah mengawalnya di bahagian hadapan, iaitu, menjana jadual penghalaan secara dinamik mengikut kebenaran pengguna yang berbeza; gunakan Kawalan antara muka belakang, iaitu, bahagian hadapan memulakan permintaan kepada bahagian belakang dan menjana jadual penghalaan yang sepadan berdasarkan maklumat kebenaran yang dikembalikan. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sesuai untuk melaksanakan kawalan kebenaran penghalaan berdasarkan keadaan projek tertentu.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara vue melaksanakan kawalan kebenaran penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!