Rumah > Artikel > hujung hadapan web > 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.
// roles.ts export enum Role { Admin = 'admin', User = 'user', } // permissions.ts export enum Permission { Create = 'create', Update = 'update', Delete = 'delete', }
// 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
// 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')
<template> <div> <h1 v-permission="`${Role.Admin}.${Permission.Create}`">仅管理员可见</h1> <h1 v-permission="`${Role.User}.${Permission.Update}`">仅普通用户可见</h1> </div> </template>
Dalam contoh di atas, teg
// 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!