feat: 添加按钮权限

mock/user/index.ts

@@ -17,7 +17,7 @@ const List: {
     password: 'admin',
     role: 'admin',
     roleId: '1',
-    permissions: '*.*.*'
+    permissions: ['*.*.*']
   },
   {
     username: 'test',

src/directives/permission/hasPermi.ts

@@ -3,32 +3,33 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useCache } from '@/hooks/web/useCache'
 import { intersection } from 'lodash-es'
 import { isArray } from '@/utils/is'
+import { useAppStoreWithOut } from '@/store/modules/app'
 
 const { t } = useI18n()
 const { wsCache } = useCache()
-// 全部权限
+const appStore = useAppStoreWithOut()
-const all_permission = '*:*:*'
-const permissions = wsCache.get('userInfo').permissions
 
+// 全部权限
+const all_permission = ['*.*.*']
+const hasPermission = (value: string | string[]): boolean => {
+  const permissions = wsCache.get(appStore.getUserInfo).permissions as string[]
+  if (!value) {
+    throw new Error(t('permission.hasPermission'))
+  }
+  if (!isArray(value)) {
+    return permissions?.includes(value as string)
+  }
+  if (all_permission[0] === permissions[0]) {
+    return true
+  }
+  return (intersection(value, permissions) as string[]).length > 0
+}
 function hasPermi(el: Element, binding: DirectiveBinding) {
   const value = binding.value
 
-  const hasPermission = (value: string | string[]): boolean => {
+  const flag = hasPermission(value)
-    if (all_permission === permissions) return true
+  if (!flag) {
-
-    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>) => {
@@ -39,7 +40,7 @@ const permiDirective: Directive = {
   mounted
 }
 
-export function setupPermissionDirective(app: App<Element>) {
+export const setupPermissionDirective = (app: App<Element>) => {
   app.directive('hasPermi', permiDirective)
 }
 

src/views/Example/Dialog/ExampleDialog.vue

@@ -231,10 +231,14 @@ const save = async () => {
       @register="register"
     >
       <template #action="{ row }">
-        <ElButton type="primary" @click="action(row, 'edit')">
+        <ElButton type="primary" v-hasPermi="['example:dialog:edit']" @click="action(row, 'edit')">
           {{ t('exampleDemo.edit') }}
         </ElButton>
-        <ElButton type="success" @click="action(row, 'detail')">
+        <ElButton
+          type="success"
+          v-hasPermi="['example:dialog:view']"
+          @click="action(row, 'detail')"
+        >
           {{ t('exampleDemo.detail') }}
         </ElButton>
         <ElButton type="danger" v-hasPermi="['example:dialog:delete']" @click="delData(row, false)">