Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan kebenaran peringkat halaman dalam projek Vue?

Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan kebenaran peringkat halaman dalam projek Vue?

Dalam projek Vue, kami selalunya perlu mengawal akses halaman berdasarkan peranan atau kebenaran pengguna. Fungsi penghalaan Vue boleh membantu kami melaksanakan kawalan kebenaran peringkat halaman, supaya pengguna dengan peranan berbeza hanya boleh mengakses halaman yang mereka mempunyai kebenaran. Dalam artikel ini, kami akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan kawalan kebenaran peringkat halaman dalam projek Vue.

1. Pasang dan konfigurasikan Penghala Vue
   Pertama, kita perlu memasang dan mengkonfigurasi Penghala Vue. Anda boleh menggunakan npm atau yarn untuk memasang Vue Router:

   npm install vue-router

   Salin selepas log masuk

   Kemudian, perkenalkan dan pasang Vue Router dalam fail kemasukan projek (seperti main.js):

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)

   Salin selepas log masuk

2. Buat jadual penghalaan
   Seterusnya, kita perlu untuk mencipta Jadual laluan yang mentakrifkan semua halaman dalam projek dan laluannya yang sepadan. Dalam jadual penghalaan, kami juga boleh menentukan halaman yang memerlukan kawalan kebenaran dan peranan yang diperlukan untuk mengakses halaman ini. Berikut ialah contoh jadual penghalaan mudah:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   import HomePage from '../views/HomePage.vue'
   import AdminPage from '../views/AdminPage.vue'
   import UserPage from '../views/UserPage.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: HomePage },
     { 
    path: '/admin', 
    component: AdminPage, 
    meta: { 
      requiresAuth: true, // 需要登录后才能访问
      roles: ['admin'] // 只有admin角色的用户可以访问
    }
     },
     { 
    path: '/user', 
    component: UserPage, 
    meta: { 
      requiresAuth: true, // 需要登录后才能访问
      roles: ['user', 'admin'] // 只要是user或admin角色的用户可以访问
    }
     }
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router

   Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan halaman yang memerlukan kawalan kebenaran dan peranannya yang sepadan dengan menambahkan atribut requireAuth dan roles pada medan meta.

3. Melaksanakan kawalan kebenaran
   Seterusnya, kita perlu membuat pertimbangan tentang kawalan kebenaran apabila laluan lompatan. Pengawal navigasi global boleh digunakan dalam Penghala Vue untuk melaksanakan kawalan kebenaran.

Buka fail penghala/index.js dan tambahkan pengawal navigasi global:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth // 是否需要登录才能访问
  const roles = to.meta.roles // 页面所需的角色

  // 判断是否需要登录和角色是否匹配
  if (requiresAuth && !isLoggedIn()) {
    next('/login') // 没有登录，跳转到登录页面
  } else if (roles && !hasRole(roles)) {
    next('/404') // 没有权限，跳转到404页面
  } else {
    next() // 继续下一步
  }
})

function isLoggedIn() {
  // 判断用户是否登录
  // 返回true或false
}

function hasRole(roles) {
  // 判断用户角色是否匹配
  // 返回true或false
}

Dalam kod di atas, kami menggunakan kaedah beforeEach untuk menambah fungsi pengawal navigasi global. Dalam fungsi ini, kami mula-mula menentukan sama ada halaman memerlukan log masuk Jika log masuk diperlukan tetapi pengguna tidak log masuk, kami akan melompat ke halaman log masuk. Kemudian, kami menentukan sama ada peranan pengguna sepadan, dan jika tidak, lompat ke halaman 404. Akhir sekali, jika kedua-dua log masuk dan peranan memenuhi keperluan, teruskan memuatkan halaman.

4. Digunakan dalam komponen
   Dalam komponen yang memerlukan kawalan kebenaran, kita boleh mendapatkan maklumat peranan yang diperlukan oleh halaman melalui medan meta laluan. Kami boleh menggunakan maklumat ini untuk menentukan sama ada untuk memaparkan atau mengendalikan elemen tertentu. Berikut ialah contoh mudah:

<template>
  <div>
    <h1 v-if="hasAdminRole">只有admin用户能看到这个标题</h1>
    <button v-if="hasUserRole">只有admin和user用户才能看到这个按钮</button>
    <p>页面内容</p>
  </div>
</template>

<script>
export default {
  computed: {
    hasAdminRole() {
      return this.$route.meta.roles.includes('admin')
    },
    hasUserRole() {
      return this.$route.meta.roles.includes('user')
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan atribut yang dikira untuk menentukan sama ada peranan pengguna semasa disertakan dalam peranan dalam meta, dan jika ya, paparkan elemen yang sepadan.

Melalui langkah di atas, kami boleh menggunakan penghalaan untuk melaksanakan kawalan kebenaran peringkat halaman dalam projek Vue. Pengguna dengan peranan berbeza hanya akan dapat mengakses halaman yang mereka mempunyai kebenaran, sekali gus mencapai kawalan kebenaran yang terperinci. Harap ini membantu!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk melaksanakan kawalan kebenaran peringkat halaman dalam projek Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!