Rumah > hujung hadapan web > View.js > teks badan

Kemahiran pembangunan Vue3+TS+Vite: cara mengurus hak pengguna

PHPz
Lepaskan: 2023-09-09 15:52:41
asal
1261 orang telah melayarinya

Kemahiran pembangunan Vue3+TS+Vite: cara mengurus hak pengguna

Petua pembangunan Vue3+TS+Vite: Cara mengurus hak pengguna

Pengenalan:
Dalam aplikasi web moden, pengurusan hak pengguna ialah fungsi penting. Dengan menentukan peranan dan kebenaran pengguna, kami boleh menyekat akses pengguna kepada ciri dan halaman yang berbeza. Dengan gabungan Vue3, TypeScript dan Vite, kami boleh mengurus hak pengguna dengan lebih cekap. Artikel ini akan memperkenalkan beberapa petua praktikal dan contoh kod untuk membantu anda melaksanakan pengurusan hak pengguna dalam Vue3 + TS + Vite.

  1. Tentukan peranan dan kebenaran
    Sebelum melakukan pengurusan kebenaran pengguna, kami perlu menentukan peranan dan kebenaran yang berbeza terlebih dahulu. Peranan boleh menjadi pentadbir (pentadbir), pengguna (pengguna biasa), dll., dan keizinan boleh dibuat (buat), kemas kini (kemas kini) atau padam (padam), dsb. Berikut ialah contoh mudah definisi peranan dan kebenaran:
// roles.ts
export enum Role {
  Admin = 'admin',
  User = 'user',
}

// permissions.ts
export enum Permission {
  Create = 'create',
  Update = 'update',
  Delete = 'delete',
}
Salin selepas log masuk
  1. Cipta arahan kebenaran
    Untuk lebih mudah menunjukkan atau menyembunyikan elemen tertentu dalam komponen Vue, kami boleh mencipta arahan tersuai untuk menyemak kebenaran pengguna. Berikut ialah contoh arahan kebenaran:
// directives/permission.ts
import { Directive, DirectiveBinding } from 'vue'
import { Role, Permission } from '@/constants/roles'

const permissionDirective: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
  const { value } = binding
  const userRole = 'admin' // 这里假设用户角色为admin,实际开发中需要根据实际情况获取

  // 在这里检查用户权限和角色,决定是否展示元素
  if (value) {
    const [requiredRole, requiredPermission] = value.split('.')
    if (
      (requiredRole && requiredRole !== userRole) ||
      (requiredPermission && !hasPermission(userRole, requiredPermission))
    ) {
      el.style.display = 'none'
    }
  }
}

const hasPermission = (role: Role, permission: Permission): boolean => {
  // 在这里根据角色和权限检查用户是否有权限
  // 实际开发中,可以从后端接口获取用户角色和权限,并做相应的校验
  return true
}

export default permissionDirective
Salin selepas log masuk
  1. Daftar Arahan Kebenaran
    Daftar arahan kebenaran dalam fail kemasukan permohonan. Berikut ialah contoh:
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import permissionDirective from '@/directives/permission'

const app = createApp(App)

app.directive('permission', permissionDirective)

app.mount('#app')
Salin selepas log masuk
  1. Menggunakan arahan kebenaran
    Dalam komponen Vue, kami boleh menggunakan arahan kebenaran untuk mengawal paparan atau penyembunyian elemen. Berikut ialah contoh:
<template>
  <div>
    <h1 v-permission="`${Role.Admin}.${Permission.Create}`">仅管理员可见</h1>
    <h1 v-permission="`${Role.User}.${Permission.Update}`">仅普通用户可见</h1>
  </div>
</template>
Salin selepas log masuk

Dalam contoh di atas, teg

yang pertama hanya akan dipaparkan jika peranan pengguna ialah pentadbir dan mempunyai kebenaran mencipta. Begitu juga, teg

kedua hanya akan dipaparkan jika peranan pengguna adalah pengguna dan mempunyai kebenaran kemas kini.

  1. Pengurusan kebenaran penghalaan dinamik
    Dalam projek sebenar, selalunya perlu untuk menjana laluan secara dinamik berdasarkan kebenaran pengguna. Kami boleh menyemak kebenaran pengguna dalam pengawal navigasi laluan dan menambah, memadam atau mengubah hala laluan secara dinamik berdasarkan kebenaran. Berikut ialah contoh pengurusan kebenaran penghalaan dinamik menggunakan Penghala Vue:
// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import { Role, Permission } from '@/constants/roles'
import { hasPermission } from '@/utils/permission'

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/Admin.vue')
    meta: {
      requiresAuth: true,
      requiredRoles: [Role.Admin],
    },
  },
  // ...
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = true // 假设用户已登录,实际开发中需要根据实际情况获取

  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    const userRole = 'admin' // 这里假设用户角色为admin,实际开发中需要根据实际情况获取

    if (to.meta.requiredRoles && !hasPermission(userRole, to.meta.requiredRoles)) {
      next('/error')
    } else {
      next()
    }
  }
})

export default router
Salin selepas log masuk

Dalam contoh di atas, kami mula-mula menyemak sama ada pengguna telah log masuk. Kami kemudian mendapatkan peranan pengguna dan memadankannya dengan "Peranan yang diperlukan" laluan. Jika peranan pengguna tidak memenuhi keperluan, ubah hala ke halaman ralat. Jika tidak, kami terus memuatkan laluan yang diminta.

Kesimpulan:
Dengan keupayaan berkuasa Vue3, TypeScript dan Vite, kami boleh mengurus hak pengguna dengan lebih cekap. Dengan mentakrifkan peranan dan kebenaran, mencipta arahan kebenaran dan menggunakan pengurusan kebenaran penghalaan dinamik, kami boleh melaksanakan kawalan kebenaran pengguna dengan mudah. Contoh di atas berharap dapat membantu anda melaksanakan pengurusan hak pengguna dalam projek Vue3 + TS + Vite anda.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: cara mengurus hak pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan