Vue3 TS Vite development tips: How to manage user rights

Introduction:
In modern web applications, user rights management is a crucial Function. By determining the user's role and permissions, we can restrict the user's access to different features and pages. With the combination of Vue3, TypeScript and Vite, we can manage user rights more efficiently. This article will introduce some practical tips and code examples to help you implement user rights management in Vue3 TS Vite.

1. Define roles and permissions
   Before performing user permission management, we first need to define different roles and permissions. The role can be admin (administrator), user (ordinary user), etc., and the permissions can be create (create), update (update) or delete (delete), etc. The following is a simple example of role and permission definition:

// roles.ts
export enum Role {
  Admin = 'admin',
  User = 'user',
}

// permissions.ts
export enum Permission {
  Create = 'create',
  Update = 'update',
  Delete = 'delete',
}

2. Create permission directive
   In order to more conveniently display or hide certain elements in the Vue component, we can create a custom Define directives to check user permissions. The following is an example of a permission directive:

// 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. Register permission directive
   Register the permission directive in the application's entry file. The following is an example:

// 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. Using permission directives
   In Vue components, we can use permission directives to control the display or hiding of elements. Here is an example:

<template>
  <div>
    <h1 v-permission="`${Role.Admin}.${Permission.Create}`">仅管理员可见</h1>
    <h1 v-permission="`${Role.User}.${Permission.Update}`">仅普通用户可见</h1>
  </div>
</template>

In the above example, the first

tag will only be displayed if the user role is admin and has create permissions. Similarly, the second

tag will only be displayed if the user role is user and has the update permission.

5. Dynamic Routing Permission Management
   In actual projects, it is often necessary to dynamically generate routes based on user permissions. We can check the user's permissions in the route navigation guard and dynamically add, delete or redirect routes based on the permissions. The following is an example of using Vue Router for dynamic routing permission management:

// 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

Copy after login

In the above example, we first check whether the user is logged in. We then get the user roles and match them against the "requiredRoles" of the route. If the user role does not meet the requirements, redirect to an error page. Otherwise, we continue loading the requested route.

Conclusion:
With the powerful capabilities of Vue3, TypeScript and Vite, we can manage user rights more efficiently. By defining roles and permissions, creating permission directives, and using dynamic routing permission management, we can easily implement user permission control. The above examples hope to help you implement user rights management in your Vue3 TS Vite project.

The above is the detailed content of Vue3+TS+Vite development skills: how to manage user rights. For more information, please follow other related articles on the PHP Chinese website!