feat: 添加按钮权限

src/directives/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import { setupPermissionDirective } from './permission/hasPermi'
+
+/**
+ * 导出指令：v-xxx
+ * @methods hasPermi 按钮权限，用法: v-hasPermi
+ */
+export const setupPermission = (app: App<Element>) => {
+  setupPermissionDirective(app)
+}

src/directives/permission/hasPermi.ts

@@ -0,0 +1,46 @@
+import type { App, Directive, DirectiveBinding } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useCache } from '@/hooks/web/useCache'
+import { intersection } from 'lodash-es'
+import { isArray } from '@/utils/is'
+
+const { t } = useI18n()
+const { wsCache } = useCache()
+// 全部权限
+const all_permission = '*:*:*'
+const permissions = wsCache.get('userInfo').permissions
+
+function hasPermi(el: Element, binding: DirectiveBinding) {
+  const value = binding.value
+
+  const hasPermission = (value: string | string[]): boolean => {
+    if (all_permission === permissions) return true
+
+    if (!value) return true
+
+    if (!isArray(value)) {
+      return permissions?.includes(value as string)
+    }
+    return (intersection(value, permissions) as string[]).length > 0
+  }
+
+  if (!hasPermission(value)) {
+    el.parentNode?.removeChild(el)
+  } else {
+    el.parentNode && el.parentNode.removeChild(el)
+    throw new Error(t('permission.hasPermission'))
+  }
+}
+const mounted = (el: Element, binding: DirectiveBinding<any>) => {
+  hasPermi(el, binding)
+}
+
+const permiDirective: Directive = {
+  mounted
+}
+
+export function setupPermissionDirective(app: App<Element>) {
+  app.directive('hasPermi', permiDirective)
+}
+
+export default permiDirective

src/locales/en.ts

@@ -143,6 +143,9 @@ export default {
     inputPassword: 'InputPassword',
     sticky: 'Sticky'
   },
+  permission: {
+    hasPermission: 'Please set the operation permission value'
+  },
   analysis: {
     newUser: 'New user',
     unreadInformation: 'Unread information',

src/locales/zh-CN.ts

@@ -143,6 +143,9 @@ export default {
     inputPassword: '密码输入框',
     sticky: '黏性'
   },
+  permission: {
+    hasPermission: '请设置操作权限值'
+  },
   analysis: {
     newUser: '新增用户',
     unreadInformation: '未读消息',

src/main.ts

@@ -25,6 +25,9 @@ import '@/plugins/animate.css'
 // 路由
 import { setupRouter } from './router'
 
+// 权限
+import { setupPermission } from './directives'
+
 import { createApp } from 'vue'
 
 import App from './App.vue'
@@ -44,6 +47,8 @@ const setupAll = async () => {
 
   setupRouter(app)
 
+  setupPermission(app)
+
   app.mount('#app')
 }
 

src/views/Example/Dialog/ExampleDialog.vue

@@ -237,7 +237,7 @@ const save = async () => {
         <ElButton type="success" @click="action(row, 'detail')">
           {{ t('exampleDemo.detail') }}
         </ElButton>
-        <ElButton type="danger" @click="delData(row, false)">
+        <ElButton type="danger" v-hasPermi="['example:dialog:delete']" @click="delData(row, false)">
           {{ t('exampleDemo.del') }}
         </ElButton>
       </template>