Bagaimana untuk menulis pengesahan vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menawarkan kemudahan penggunaan dan fleksibiliti. Apabila membangunkan aplikasi Vue, selalunya perlu untuk melaksanakan fungsi pengesahan dan kebenaran pengguna untuk memastikan bahawa hanya pengguna yang disahkan boleh mengakses sumber terhad. Artikel ini akan memperkenalkan cara melaksanakan pengesahan dalam Vue.

1. Tentukan kaedah pengesahan

Sebelum anda mula menulis fungsi pengesahan, anda perlu menentukan kaedah pengesahan untuk digunakan. Kaedah pengesahan biasa termasuk kawalan akses berasaskan peranan (RBAC) dan kawalan akses berasaskan kebenaran (ABAC). RBAC ialah dasar kebenaran akses yang mengawal akses kepada sumber dengan menugaskan pengguna kepada peranan dan memberikan kebenaran khusus kepada setiap peranan. ABAC ialah dasar kebenaran akses yang menetapkan satu set peraturan antara pengguna dan sumber untuk menentukan sama ada pengguna tertentu mempunyai hak akses.

Dalam aplikasi Vue, langkah khusus untuk melaksanakan kaedah pengesahan RBAC atau ABAC akan berbeza, jadi anda perlu memilih kaedah yang sesuai mengikut keperluan aplikasi.

2. Melaksanakan pengesahan identiti

Sebelum melaksanakan pengesahan, pengesahan identiti pengguna perlu dilaksanakan. Biasanya ini dilakukan dengan mendapatkan kelayakan pengguna dalam borang log masuk dan menghantarnya ke pelayan untuk pengesahan. Jika pengesahan berjaya, respons yang mengandungi maklumat identiti tentang pengguna dan token dijana dan disimpan ke storan setempat aplikasi atau kuki.

Berikut ialah contoh kod di mana pengguna memasukkan nama pengguna dan kata laluan mereka dan menghantarnya ke pelayan untuk pengesahan:

methods: {
  login() {
    axios.post('/auth/login', {username: this.username, password: this.password})
      .then(response => {
        const {user, token} = response.data
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

3. Menulis pengawal laluan Vue

Vue menyediakan ciri yang dipanggil "Pengawal Laluan", yang membolehkan pembangun melampirkan fungsi pemintas pada laluan dan memanggil pemintas ini pada permulaan navigasi, semasa pengawal eksklusif laluan dan semasa pengawal global laluan.

Dalam Vue, kawalan akses boleh dilaksanakan menggunakan pengawal laluan untuk memastikan hanya pengguna yang disahkan boleh mengakses laluan terhad. Berikut ialah contoh kod di mana pengawal laluan Vue memintas laluan yang dibenarkan:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') !== null
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dalam kod di atas, apabila pengguna cuba mengakses laluan yang ditandakan dengan metadata "requiresAuth", pengawal eksklusif laluan dan penghalaan global fungsi cangkuk dipanggil antara pengawal. Jika pengguna telah mengesahkan, akses kepada laluan dibenarkan. Jika tidak, ubah hala ke halaman log masuk.

4. Melaksanakan pengesahan RBAC dan ABAC

Kaedah pelaksanaan pengesahan RBAC dan ABAC adalah berbeza. Ringkasnya, RBAC membahagikan pengguna kepada peranan dan kebenaran dan memberikannya kepada peranan yang telah ditetapkan. ABAC menetapkan dasar keselamatan sebagai koleksi dan menguatkuasakan dasar ini atas permintaan akses untuk menentukan pengguna yang mempunyai akses kepada sumber terhad.

Apabila melaksanakan pengesahan RBAC, adalah perlu untuk membina pemetaan antara peranan pengguna dan kebenaran, dan menetapkan peranan kepada setiap pengguna. Aplikasi kemudiannya boleh memutuskan sama ada pengguna mempunyai kebenaran untuk mengakses sumber tertentu berdasarkan peranan pengguna. Berikut ialah contoh kod:

const roles = {
  admin: {
    permissions: ['user:list', 'user:create', 'user:edit']
  },
  manager: {
    permissions: ['user:list', 'user:edit']
  },
  member: {
    permissions: []
  }
}

function checkPermission(permission) {
  const user = JSON.parse(localStorage.getItem('user'))
  const userRole = user.role
  if (roles[userRole]) {
    return roles[userRole].permissions.includes(permission)
  } else {
    return false
  }
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dalam kod di atas, pemetaan peranan disimpan dalam objek peranan. Peranan pengguna ditentukan oleh maklumat pengguna yang disimpan dalam localStorage. Fungsi sebenar yang menyemak kebenaran, checkPermission(), menyemak sama ada pengguna mempunyai kebenaran yang ditentukan.

Apabila melaksanakan kebenaran ABAC, anda perlu menulis dasar yang menyemak cara akses digunakan untuk melaksanakan operasi keselamatan pada sumber. Ambil kawalan akses berasaskan atribut (ABAC) sebagai contoh ABAC mentakrifkan set peraturan yang menyemak sama ada pengguna boleh mengakses sumber berdasarkan atribut yang berkaitan dengan pengguna (seperti peranan, lokasi atau peranti yang dimiliki).

Berikut ialah contoh kod di mana pengawal laluan Vue menggunakan atribut untuk menguatkuasakan dasar ABAC:

const permissions = {
  'user:list': {
    condition: 'user.role === "admin" || user.role === "manager"'
  },
  'user:create': {
    condition: 'user.role === "admin"'
  },
  'user:edit': {
    condition: 'user.role === "admin" || (user.role === "manager" && user.department === "it")'
  }
}

const checkPermission = (permission) => {
  const user = JSON.parse(localStorage.getItem('user'))
  const rule = permissions[permission]
  return rule && eval(rule.condition)
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'home' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dalam kod di atas, setiap peraturan kebenaran akses mempunyai atribut syarat yang mentakrifkan perkara yang pengguna mesti memenuhi sifat untuk mengakses sumber tertentu. Fungsi checkPermission() menggunakan fungsi eval() untuk mentafsir dan melaksanakan atribut syarat peraturan.

Ringkasan

Untuk melaksanakan pengesahan dalam aplikasi Vue, anda perlu menentukan kaedah pengesahan, melaksanakan pengesahan identiti, menulis pengawal penghalaan Vue dan melaksanakan pengesahan RBAC atau ABAC. Tidak kira kaedah pengesahan yang digunakan, pengawal laluan Vue ialah teknologi utama untuk mencapai kebenaran. Dengan menggunakan pengawal laluan Vue dan melaksanakan pengesahan RBAC atau ABAC, anda boleh membenarkan akses dan melindungi sumber terhad dalam aplikasi anda dengan mudah.

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