使用自定义指令实现页面内容权限控制

使用自定义指令实现页面内容权限控制

/directives/permission/index.js

// /directives/permission/index.js

import { useUserStoreWithOut } from "@/store/modules/user";
const userStore = useUserStoreWithOut();

const hasPermission = (el, binding) => {
  // 获取当前角色权限
  const roles = userStore.getRoles;
  console.log(roles);
  const { value } = binding;
  console.log(value);
  if (value && value instanceof Array) {
    if (value.length > 0) {
      const permissionRoles = value;
      const hasPermission = roles.some((role) => {
        console.log(role, 'role');
        console.log(permissionRoles.includes(role));
        return permissionRoles.includes(role);
      });

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  } else {
    throw new Error("need roles!");
  }
};

const mounted = (el, binding) => {
  console.log(el, binding);
  hasPermission(el, binding);
};

const permissionDirective = {
  mounted,
};

export const setupPermissionDirective = (app) => {
  app.directive("hasPermission", permissionDirective);
};

export default permissionDirective;

/directives/index.js

// /directives/index.js

import { setupPermissionDirective } from "./permission";

export const setupPermission = (app) => {
  setupPermissionDirective(app);
};

/main.js

import { setupPermission } from "@/directives";

const setupAll = async () => {
  const app = createApp(App);
  setupPermission(app);
  app.mount("#app");
};
setupAll();