Add permission judgement functions and directives

src/directive/index.js

@@ -0,0 +1,7 @@
+import hasRole from './permission/hasRole'
+import hasPermi from './permission/hasPermi'
+
+export default function directive(app) {
+  app.directive('hasRole', hasRole)
+  app.directive('hasPermi', hasPermi)
+}

src/directive/permission/hasPermi.js

@@ -0,0 +1,27 @@
+/**
+ * v-hasPermi 操作权限处理
+ */
+
+import useUserStore from '@/store/modules/user'
+
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = '*:*:*'
+    const permissions = useUserStore().permissions
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}

src/directive/permission/hasRole.js

@@ -0,0 +1,27 @@
+/**
+ * v-hasRole 角色权限处理
+ */
+
+import useUserStore from '@/store/modules/user'
+
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding
+    const super_admin = 'admin'
+    const roles = useUserStore().roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some(role => {
+        return super_admin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置角色权限标签值`)
+    }
+  }
+}

src/main.js

@@ -3,8 +3,8 @@ import { createApp } from 'vue'
 import store from '@/store'
 import App from './App.vue'
 import router from './router'
+import directive from './directive' // directive
 import './permission'
-
 // svg图标
 import 'virtual:svg-icons-register'
 import dayjs from 'dayjs'
@@ -20,5 +20,6 @@ app.config.globalProperties.$dayjs = dayjs
 
 app.use(store)
 app.use(router)
+directive(app)
 
 app.mount('#app')

src/utils/permission.js

@@ -0,0 +1,51 @@
+import useUserStore from '@/store/modules/user'
+
+/**
+ * 字符权限校验
+ * @param {Array} value 校验值
+ * @returns {Boolean}
+ */
+export function checkPermi(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const permissions = useUserStore().permissions
+    const permissionDatas = value
+    const all_permission = '*:*:*'
+
+    const hasPermission = permissions.some(permission => {
+      return all_permission === permission || permissionDatas.includes(permission)
+    })
+
+    if (!hasPermission) {
+      return false
+    }
+    return true
+  } else {
+    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
+    return false
+  }
+}
+
+/**
+ * 角色权限校验
+ * @param {Array} value 校验值
+ * @returns {Boolean}
+ */
+export function checkRole(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const roles = useUserStore().roles
+    const permissionRoles = value
+    const super_admin = 'admin'
+
+    const hasRole = roles.some(role => {
+      return super_admin === role || permissionRoles.includes(role)
+    })
+
+    if (!hasRole) {
+      return false
+    }
+    return true
+  } else {
+    console.error(`need roles! Like checkRole="['admin','editor']"`)
+    return false
+  }
+}