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',
}

2. 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

3. 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')

4. Menggunakan arahan kebenaran
   Dalam komponen Vue, kami boleh menggunakan arahan kebenaran untuk mengawal paparan atau penyembunyian elemen. Berikut ialah contoh:

<template>
  <div>
    <h1 id="仅管理员可见">仅管理员可见</h1>
    <h1 id="仅普通用户可见">仅普通用户可见</h1>
  </div>
</template>

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.

5. 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

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!