权限按钮(Ts)

//main.ts全局挂载

import { useUserStore } from "@/stores/admin/index";//引入状态管理
/**
 * 自定义全局组件
 */
app.directive("permission",{
    mounted(el,binding){
        // 当前按钮传递的值( v-permission="'add'" 中的值)
        let val = binding.value//获取状态里面信息
        // 获取到存放在 store 中的权限数据
        const store = useUserStore()
        var permissionList = store.permissionList || []//为了防止空指向异常
        if (-1===permissionList.indexOf(val)) {//  //判断按钮显隐 是否存在对应的按钮权限
            // 没有权限
            el.remove?.();
        }
    }
})

//index.ts状态管理

getters: {
    /**
     * 用户权限列表
     * @param state 状态管理仓库
     * @returns 权限列表
     */
    permissionList:(state)=>{
      return state.user.perms
    }
  },

//role.vue最后我们在页面中就可以通过自定义指令 v-permission来判断

<el-button size="small" type="primary"  @click="handleEdit(scope.$index, scope.row)" v-permission="'sys:role:update'">修改</el-button>

（"'sys:role:update'"当前角色的按钮的权限状态，不同的状态页面，角色状态也是不同的）