vue3 封装后台系统按钮权限控制

1、封装权限指令permission

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、全局注册指令

import * as directives from '@/directives'

Object.keys(directives).forEach(key=>{
    app.directive(key,directives[key])
})
    

3、组件使用

<button v-permission="['user.add']">新增</button>