vue3 封装后台系统按钮权限控制
1、封装权限指令permission
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { useRoutesStore } from "@/store/modules/routes"; export const permission = { mounted(el, binding) { const routesStore = useRoutesStore(); const { value } = binding; if (value && value instanceof Array && value.length > 0) { const permissionFunc = value; //判断传递进来的按钮权限,用户是否拥有 const hasPermission = routesStore.permission.some((role) => { return permissionFunc.includes(role); }); if (!hasPermission) { el.style.display = "none"; } } else { throw new Error("need roles! Like v-permission=\"['admin','editor']\""); } }, };
2、全局注册指令
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import * as directives from '@/directives' Object.keys(directives).forEach(key=>{ app.directive(key,directives[key]) })
3、组件使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<button v-permission="['user.add']">新增</button>