可以通过指令去做
Vue.directive('hasPermission', {
bind(el, binding, vnode) {
const permissions = vnode.context.$store.state.account.permissions
if (binding.value === '') return
const value = binding.value.split(',')
let flag = true
for (const v of value) {
if (!permissions.includes(v)) {
flag = false
}
}
if (!flag) {
if (!el.parentNode) {
el.style.display = 'none'
} else {
el.parentNode.removeChild(el)
}
}
}
}

按钮级别的权限
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E6%8C%87%E4%BB%A4%E6%9D%83%E9%99%90

如果权限角色是动态的，那么要为每个按钮做标识，根据这个标识去查哪些角色拥有该权限，再根据登录人的权限角色进行显示与否。

在Vue中进行权限管理的一种常见方式是结合路由和用户角色来控制页面和组件的访问权限。同时，如果需要控制到按钮级别的权限，可以使用条件渲染和指令来实现。

示例

定义路由和角色权限：
在路由配置中，为每个路由定义所需的角色权限。例如，可以为某个路由设置role属性，表示该路由所需的角色权限。

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      role: 'admin', // 设置路由所需的角色权限
    },
  },
  // ...
];

检查用户权限：
在路由导航守卫中，可以检查用户的角色权限与路由定义的权限是否匹配。如果不匹配，可以进行相应的跳转或显示错误信息。

router.beforeEach((to, from, next) => {
  const requiredRole = to.meta.role;
  const userRole = getUserRole(); // 获取用户角色，可以从后端接口获取

  if (requiredRole && requiredRole !== userRole) {
    // 权限不匹配，跳转到无权限页面或显示错误信息
    next({ name: 'NoAccess' });
  } else {
    // 权限匹配，继续导航
    next();
  }
});

控制按钮级别的权限：
如果需要控制到按钮级别的权限，可以在模板中使用条件渲染和指令来控制按钮的显示和可用状态。

<button v-if="hasButtonPermission" @click="handleButtonClick">按钮</button>

在组件中，通过判断当前用户的角色权限，设置hasButtonPermission变量的值。

export default {
  data() {
    return {
      hasButtonPermission: checkButtonPermission(),
    };
  },
  methods: {
    handleButtonClick() {
      // 处理按钮点击事件
    },
  },
};

通过以上方式，你可以在Vue中实现基于角色的权限管理，控制页面和组件的访问权限，并且可以细粒度地控制到按钮级别的权限。当用户角色发生变化时，你需要相应地更新权限状态并重新渲染组件，以保持权限的正确性。