diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts index f9051dde..6dd29950 100644 --- a/src/directive/permission/index.ts +++ b/src/directive/permission/index.ts @@ -1,40 +1,64 @@ -import { hasAuth } from "@/plugins/permission"; import type { Directive, DirectiveBinding } from "vue"; +import { useUserStore } from "@/store"; + /** * 按钮权限 */ export const hasPerm: Directive = { mounted(el: HTMLElement, binding: DirectiveBinding) { - // DOM绑定需要的按钮权限标识 - const { value: requiredPerms } = binding; - if (requiredPerms) { - if (!hasAuth(requiredPerms)) { - if (el.parentNode) { - el.parentNode.removeChild(el); - } - } - } else { - throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""); + const requiredPerms = binding.value; + + // 校验传入的权限值是否合法 + if (!requiredPerms || (typeof requiredPerms !== "string" && !Array.isArray(requiredPerms))) { + throw new Error( + "需要提供权限标识!例如:v-has-perm=\"'sys:user:add'\" 或 v-has-perm=\"['sys:user:add', 'sys:user:edit']\"" + ); + } + + const { roles, perms } = useUserStore().userInfo; + + // 超级管理员拥有所有权限 + if (roles.includes("ROOT")) { + return; + } + + // 检查权限 + const hasAuth = Array.isArray(requiredPerms) + ? requiredPerms.some((perm) => perms.includes(perm)) + : perms.includes(requiredPerms); + + // 如果没有权限,移除该元素 + if (!hasAuth && el.parentNode) { + el.parentNode.removeChild(el); } }, }; /** - * 角色权限 + * 角色权限指令 */ export const hasRole: Directive = { mounted(el: HTMLElement, binding: DirectiveBinding) { - // DOM绑定需要的角色编码 - const { value: requiredRoles } = binding; - if (requiredRoles) { - if (!hasAuth(requiredRoles, "role")) { - if (el.parentNode) { - el.parentNode.removeChild(el); - } - } - } else { - throw new Error("need roles! Like v-has-role=\"['admin','test']\""); + const requiredRoles = binding.value; + + // 校验传入的角色值是否合法 + if (!requiredRoles || (typeof requiredRoles !== "string" && !Array.isArray(requiredRoles))) { + throw new Error( + "需要提供角色标识!例如:v-has-role=\"'ADMIN'\" 或 v-has-role=\"['ADMIN', 'TEST']\"" + ); + } + + const { roles } = useUserStore().userInfo; + + // 检查是否有对应角色权限 + const hasAuth = Array.isArray(requiredRoles) + ? requiredRoles.some((role) => roles.includes(role)) + : roles.includes(requiredRoles); + + // 如果没有权限,移除元素 + if (!hasAuth && el.parentNode) { + el.parentNode.removeChild(el); } }, }; diff --git a/src/plugins/permission.ts b/src/plugins/permission.ts index 2922cb09..43e04b69 100644 --- a/src/plugins/permission.ts +++ b/src/plugins/permission.ts @@ -64,25 +64,10 @@ export function setupPermission() { }); } -/** 重定向到登录页 */ +// 重定向到登录页 function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) { const params = new URLSearchParams(to.query as Record); const queryString = params.toString(); const redirect = queryString ? `${to.path}?${queryString}` : to.path; next(`/login?redirect=${encodeURIComponent(redirect)}`); } - -/** 判断是否有权限 */ -export function hasAuth(value: string | string[], type: "button" | "role" = "button") { - const { roles, perms } = useUserStore().userInfo; - - // 超级管理员 拥有所有权限 - if (type === "button" && roles.includes("ROOT")) { - return true; - } - - const auths = type === "button" ? perms : roles; - return typeof value === "string" - ? auths.includes(value) - : value.some((perm) => auths.includes(perm)); -} diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index 484b24d1..8650b900 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -65,7 +65,7 @@ 新增
导入 - + 导出
@@ -118,7 +112,7 @@