自定义指令 权限控制按钮

permission.js

// 自定义指令 用于权限按钮显隐判定
const permission = {
  install(app, options) {
    // 角色 admin
    app.directive('admin', {
      mounted: (el) => {
        const { roles } = options;

        // admin角色的按钮 只有admin角色才显示
        const premList = roles.filter((e) => ['admin'].indexOf(e) !== -1);

        if (!premList.length && el.parentNode) el.parentNode.removeChild(el);
      },
    });

    // 角色 read_write
    app.directive('read-write', {
      mounted: (el) => {
        const { roles } = options;

        // read_write角色的按钮 只有admin read_write角色才显示
        const premList = roles.filter((e) => ['admin', 'read_write'].indexOf(e) !== -1);

        if (!premList.length && el.parentNode) el.parentNode.removeChild(el);
      },
    });
  },
};

export default permission;

mian.js

import permission from '@/utils/permission';
// 注册全局指令
 app.use(permission, { roles: userStore.roles || [] });