- 定义v-hasPermi指令
/*** v-hasPermi 操作权限处理*/import useUserStore from '@/store/modules/user'export default {mounted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";const permissions = useUserStore().permissions；//permission为数组，在系统登录后获取保存至vueX中if (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}
接口返回的permissions的格式
permissions: ["plan:planadd:add","plan:planadd:edit","performance:plan:add","performance:plan:edit","system:role:submit","performance:plan:list",]- 注册指令
在index.js文件中
import hasPermi from './permission/hasPermi'export default function directive(app){app.directive('hasPermi', hasPermi)
}
- 挂载安装指令
/*
* main.js文件
*/
import { createApp } from 'vue'
import directive from './directive' // directiveconst app = createApp(App)
directive(app)
4.在项目中使用
<el-buttontype="primary"@click="addTable(scope)":disabled="btnDis"v-hasPermi="['deptManage:yearDispatch:add']">添加</el-button>
