index.ts 1.6 KB

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