index.ts 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { useUserStoreHook } from "@/store/modules/user";
  2. import { Directive, DirectiveBinding } from "vue";
  3. /**
  4. * 按钮权限
  5. */
  6. export const hasPerm: Directive = {
  7. mounted(el: HTMLElement, binding: DirectiveBinding) {
  8. console.log("hasPerm mounted", binding);
  9. // 「超级管理员」拥有所有的按钮权限
  10. const { roles, perms } = useUserStoreHook().user;
  11. if (roles.includes("ROOT")) {
  12. return true;
  13. }
  14. // 「其他角色」按钮权限校验
  15. const { value } = binding;
  16. if (value) {
  17. const requiredPerms = value; // DOM绑定需要的按钮权限标识
  18. const hasPerm = perms?.some((perm) => {
  19. return requiredPerms.includes(perm);
  20. });
  21. if (!hasPerm) {
  22. el.parentNode && el.parentNode.removeChild(el);
  23. }
  24. } else {
  25. throw new Error(
  26. "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
  27. );
  28. }
  29. },
  30. };
  31. export function checkPerm(str: string) {
  32. // 「超级管理员」拥有所有的按钮权限
  33. const { roles, perms } = useUserStoreHook().user;
  34. if (roles.includes("ROOT")) {
  35. return true;
  36. }
  37. return perms.includes(str);
  38. }
  39. /**
  40. * 角色权限
  41. */
  42. export const hasRole: Directive = {
  43. mounted(el: HTMLElement, binding: DirectiveBinding) {
  44. const { value } = binding;
  45. if (value) {
  46. const requiredRoles = value; // DOM绑定需要的角色编码
  47. const { roles } = useUserStoreHook().user;
  48. const hasRole = roles.some((perm) => {
  49. return requiredRoles.includes(perm);
  50. });
  51. if (!hasRole) {
  52. el.parentNode && el.parentNode.removeChild(el);
  53. }
  54. } else {
  55. throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
  56. }
  57. },
  58. };