Benutzerdefinierte vue3-Anweisungen werden global in Form von Plug-Ins registriert, um Schaltflächenberechtigungen zu implementieren

Schritt 1: Erstellen Sie einen neuen Direktivenordner mit den Dateien, für die Sie die Direktive anpassen möchten.

hasPermission.js sind Benutzerberechtigungen. hasRolePermission.js sind Rollenberechtigungen

Der Inhalt von hasPermission.js ist wie folgt:

import useUserStore from '@/store/modules/user.ts'
const userStore:any = useUserStore()
const hasPermission = {
    mounted(el:any, binding:any){
        if(!binding.value.includes(userStore.userId*1)){
            el.parentNode.removeChild(el)
        }
    }
}

export default hasPermission

Der Inhalt von hasRolePermission ist wie folgt:

import usePermissionStore from '@/store/modules/permission.ts'
const usePermission:any = usePermissionStore()
const hasRolePermission = {
    mounted(el:any, binding:any){
        if(usePermission.allButtons?.length){
            if(!usePermission.allButtons.some((btn:any)=>btn.permits === binding.value)){
                el.parentNode.removeChild(el)
            }else{
                //如果有权限则设置内容为后端返回的内容
                el.textContent = usePermission.allButtons.find((btn:any)=>btn.permits === binding.value)?.menuName
            }
        }
    }
}

export default hasRolePermission

 Erstellen Sie einen neuen Plugins-Ordner und schreiben Sie ein Plugin, das globale Anweisungen automatisch registriert

Plugins/index.js

import hasPermission from './userHasPermission.ts'
import hasRolePermission from './hasRolePermission.ts'
const directives:any = {
    hasPermission,
    hasRolePermission
} 

export default {
    install(app:any) {
      Object.keys(directives).forEach((key) => {
        app.directive(key, directives[key])
      })
    },
}

Stellen Sie das Plug-in vor, das wie folgt geschrieben wurde:

import directive from '@/plugins/index.ts'
const app = createApp(App);
app.use(directive)

Wird nach Wochen in jeder Seitenkomponente verwendet

<template #option="{row, index}">
                <el-button v-hasPermission="[2,3,4,5,6]" v-if="permitsButton('system:inventoryCount:confirm')" link
                       type="primary" @click="confirmSh({id:row['id']})">
                  {
   
   { permitsButton("system:inventoryCount:confirm") }}
                </el-button>
                <el-button v-hasRolePermission="'system:inventoryCount:edit'" icon="Edit" link
                       type="primary" @click="addorEditRef?.open(row,1)">
                </el-button>
              </template>

Screenshots von Pinia-Inhalten sind leicht zu verstehen: