vue3自定义指令封装v-permission

创建文件permission.js存放权限控制

import { useAuthStore } from '@/stores/auth'
export function definePermissionDirective(app) {
  app.directive('permission', {
    mounted(el, binding) {
      const store = useAuthStore()
      const permission = binding.value // 获取指令绑定的值
      if (!store.hasPermission(permission)) {
        el.style.display = 'none'
      }
    },
    // 当组件更新且绑定值可能改变时调用(在元素本身或其父组件更新时触发)
    update(el, binding, vnode, oldVnode) {
      const permission = binding.value
      const hasPermission = store.hasPermission(permission)
      el.style.display = hasPermission ? 'block' : 'none'
    }
  })
}

store中保存权限列表

import { defineStore } from 'pinia'
const permissionList = ['user', 'editor', 'admin']

export const useAuthStore = defineStore('auth', {
  state: () => ({
    permissions: permissionList
  }),
  getters: {
    hasPermission: (state) => (permission) => {
      // 检查用户是否具有给定的权限
      return state.permissions.includes(permission)
    }
  },
  actions: {
    updatePermissions(newPermissions) {
      this.permissions = newPermissions
    }
  }
})

在vue实例app上进行挂载，可在项目中任意位置提供全局使用

import { definePermissionDirective } from '@/directives/permission'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia).use(router).use(ElementPlus, { locale: zhCn })
definePermissionDirective(app) // 注册自定义指令
app.mount('#app')

在任意页面使用

 <el-button type="primary" @click="addAuth" v-permission="'admin'">新增用户</el-button>