feat: 新增权限测试页

mock/role/index.ts

@@ -141,7 +141,7 @@ const adminList = [
             component: 'views/Components/Table/TreeTable',
             name: 'TreeTable',
             meta: {
-              title: 'router.TreeTable'
+              title: 'TreeTable'
             }
           },
           {
@@ -151,15 +151,15 @@ const adminList = [
             meta: {
               title: 'router.PicturePreview'
             }
-          },
-          {
-            path: 'ref-table',
-            component: 'views/Components/Table/RefTable',
-            name: 'RefTable',
-            meta: {
-              title: 'RefTable'
-            }
           }
+          // {
+          //   path: 'ref-table',
+          //   component: 'views/Components/Table/RefTable',
+          //   name: 'RefTable',
+          //   meta: {
+          //     title: 'RefTable'
+          //   }
+          // }
         ]
       },
       {
@@ -269,14 +269,6 @@ const adminList = [
         meta: {
           title: 'router.inputPassword'
         }
-      },
-      {
-        path: 'sticky',
-        component: 'views/Components/Sticky',
-        name: 'Sticky',
-        meta: {
-          title: 'router.sticky'
-        }
       }
     ]
   },
@@ -472,6 +464,59 @@ const adminList = [
         }
       }
     ]
+  },
+  {
+    path: '/authorization',
+    component: '#',
+    redirect: '/authorization/user',
+    name: 'Authorization',
+    meta: {
+      title: 'router.authorization',
+      icon: 'eos-icons:role-binding',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'department',
+        component: 'views/Authorization/Department/Department',
+        name: 'Department',
+        meta: {
+          title: 'router.department'
+        }
+      },
+      {
+        path: 'user',
+        component: 'views/Authorization/User/User',
+        name: 'User',
+        meta: {
+          title: 'router.user'
+        }
+      },
+      {
+        path: 'menu',
+        component: 'views/Authorization/Menu/Menu',
+        name: 'Menu',
+        meta: {
+          title: 'router.menuManagement'
+        }
+      },
+      {
+        path: 'role',
+        component: 'views/Authorization/Role/Role',
+        name: 'Role',
+        meta: {
+          title: 'router.role'
+        }
+      },
+      {
+        path: 'test',
+        component: 'views/Authorization/Test/Test',
+        name: 'Test',
+        meta: {
+          title: 'router.permission'
+        }
+      }
+    ]
   }
 ]
 
@@ -523,6 +568,12 @@ const testList: string[] = [
   '/example/example-add',
   '/example/example-edit',
   '/example/example-detail',
+  '/authorization',
+  '/authorization/department',
+  '/authorization/user',
+  '/authorization/role',
+  '/authorization/menu',
+  '/authorization/test',
   '/error',
   '/error/404-demo',
   '/error/403-demo',

src/components/Permission/index.ts

@@ -0,0 +1,4 @@
+import Permission from './src/Permission.vue'
+import { hasPermi } from './src/utils'
+
+export { Permission, hasPermi }

src/components/Permission/src/Permission.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { computed, unref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { currentRoute } = useRouter()
+
+const props = defineProps({
+  permission: propTypes.string.def()
+})
+
+const currentPermission = computed(() => {
+  return unref(currentRoute)?.meta?.permission || []
+})
+
+const hasPermission = computed(() => {
+  const permission = unref(props.permission)
+  if (!permission) {
+    return true
+  }
+  return unref(currentPermission).includes(permission)
+})
+</script>
+
+<template>
+  <template v-if="hasPermission">
+    <slot></slot>
+  </template>
+</template>

src/components/Permission/src/utils.ts

@@ -0,0 +1,14 @@
+import { useI18n } from '@/hooks/web/useI18n'
+import router from '@/router'
+
+export const hasPermi = (value: string) => {
+  const { t } = useI18n()
+  const permission = (router.currentRoute.value.meta.permission || []) as string[]
+  if (!value) {
+    throw new Error(t('permission.hasPermission'))
+  }
+  if (permission.includes(value)) {
+    return true
+  }
+  return false
+}

src/components/index.ts

@@ -1,6 +1,8 @@
 import type { App } from 'vue'
 import { Icon } from './Icon'
+import { Permission } from './Permission'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
+  app.component('Permission', Permission)
 }

src/directives/permission/hasPermi.ts

@@ -1,28 +1,18 @@
 import type { App, Directive, DirectiveBinding } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { useStorage } from '@/hooks/web/useStorage'
-import { intersection } from 'lodash-es'
-import { isArray } from '@/utils/is'
-import { useAppStoreWithOut } from '@/store/modules/app'
+import router from '@/router'
 
 const { t } = useI18n()
-const { getStorage } = useStorage()
-const appStore = useAppStoreWithOut()
 
-// 全部权限
-const all_permission = ['*.*.*']
-const hasPermission = (value: string | string[]): boolean => {
-  const permissions = getStorage(appStore.getUserInfo).permissions as string[]
+const hasPermission = (value: string): boolean => {
+  const permission = (router.currentRoute.value.meta.permission || []) 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]) {
+  if (permission.includes(value)) {
     return true
   }
-  return (intersection(value, permissions) as string[]).length > 0
+  return false
 }
 function hasPermi(el: Element, binding: DirectiveBinding) {
   const value = binding.value

src/locales/en.ts

@@ -162,7 +162,9 @@ export default {
     treeTable: 'Tree table',
     PicturePreview: 'Table Image Preview',
     department: 'Department management',
-    menuManagement: 'Menu management'
+    menuManagement: 'Menu management',
+    // 权限测试页面
+    permission: 'Permission test page'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'

src/locales/zh-CN.ts

@@ -162,7 +162,8 @@ export default {
     treeTable: '树形表格',
     PicturePreview: '表格图片预览',
     department: '部门管理',
-    menuManagement: '菜单管理'
+    menuManagement: '菜单管理',
+    permission: '权限测试页'
   },
   permission: {
     hasPermission: '请设置操作权限值'

src/router/index.ts

@@ -548,6 +548,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.role')
         }
+      },
+      {
+        path: 'test',
+        component: () => import('@/views/Authorization/Test/Test.vue'),
+        name: 'Test',
+        meta: {
+          title: t('router.permission'),
+          permission: ['add', 'edit', 'delete']
+        }
       }
     ]
   }

src/views/Authorization/Test/Test.vue

@@ -0,0 +1,70 @@
+<script setup lang="tsx">
+import { ContentWrap } from '@/components/ContentWrap'
+import { ref, unref } from 'vue'
+import { ElButton, ElDivider, ElRow, ElCol } from 'element-plus'
+import { hasPermi } from '@/components/Permission'
+
+const permission = ref('add')
+
+setTimeout(() => {
+  permission.value = 'view'
+}, 3000)
+</script>
+
+<template>
+  <ContentWrap>
+    <ElDivider>组件方式判断（已经全局注册，支持动态修改）</ElDivider>
+    <ElRow :gutter="20">
+      <ElCol :span="8">
+        新增权限：
+        <Permission permission="add">
+          <ElButton type="primary"> Add </ElButton>
+        </Permission>
+      </ElCol>
+      <ElCol :span="8">
+        删除权限：
+        <Permission permission="delete">
+          <ElButton type="danger"> Delete </ElButton>
+        </Permission>
+      </ElCol>
+      <ElCol :span="8">
+        3秒后切换查看权限：
+        <Permission :permission="permission">
+          <ElButton type="primary"> View </ElButton>
+        </Permission>
+      </ElCol>
+    </ElRow>
+
+    <ElDivider>指令方式判断（已经全局注册，不支持动态修改）</ElDivider>
+    <ElRow :gutter="20">
+      <ElCol :span="8">
+        新增权限：
+        <ElButton v-hasPermi="'add'" type="primary"> Add </ElButton>
+      </ElCol>
+      <ElCol :span="8">
+        删除权限：
+        <ElButton v-hasPermi="'delete'" type="danger"> Delete </ElButton>
+      </ElCol>
+      <ElCol :span="8">
+        3秒后切换查看权限（无法动态修改）：
+        <ElButton v-hasPermi="permission" type="primary"> View </ElButton>
+      </ElCol>
+    </ElRow>
+
+    <ElDivider>函数方式判断</ElDivider>
+    <ElRow :gutter="20">
+      <ElCol :span="8">
+        新增权限：
+        <ElButton v-if="hasPermi('add')" type="primary"> Add </ElButton>
+      </ElCol>
+      <ElCol :span="8">
+        删除权限：
+        <ElButton v-if="hasPermi('delete')" type="danger"> Delete </ElButton>
+      </ElCol>
+      <ElCol :span="8">
+        3秒后切换查看权限：
+        <ElButton v-if="hasPermi(unref(permission))" type="primary"> View </ElButton>
+      </ElCol>
+    </ElRow>
+  </ContentWrap>
+</template>

types/components.d.ts

@@ -1,6 +1,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
     Icon: typeof import('../components/Icon/src/Icon.vue')['default']
+    Permission: typeof import('../components/Permission/src/Permission.vue')['default']
   }
 }