feat: 租户/菜单只有管理员才能访问

apps/web-antd/src/views/system/menu/index.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { computed } from 'vue';
+
+import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 import { listToTree } from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
@@ -83,10 +87,23 @@ function expandAll() {
 function collapseAll() {
   tableApi.grid?.setAllTreeExpand(false);
 }
+
+/**
+ * 与后台逻辑相同
+ * 只有租户管理和超级管理能访问菜单管理
+ */
+const { hasAccessByRoles } = useAccess();
+const isAdmin = computed(() => {
+  return hasAccessByRoles(['admin', 'superadmin']);
+});
+
+/**
+ * 不要问为什么有两个根节点 v-if会控制只会渲染一个
+ */
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">菜单权限列表</span>
@@ -136,4 +153,5 @@ function collapseAll() {
     </BasicTable>
     <MenuDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>

apps/web-antd/src/views/system/tenant/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -131,11 +132,19 @@ function handleMultiDelete() {
     },
   });
 }
-const { hasAccessByCodes } = useAccess();
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">租户列表 </span>
@@ -202,4 +211,5 @@ const { hasAccessByCodes } = useAccess();
     </BasicTable>
     <TenantDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
 </template>

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -126,11 +127,19 @@ function handleMultiDelete() {
   });
 }
 
-const { hasAccessByCodes } = useAccess();
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">租户套餐列表</span>
@@ -197,4 +206,5 @@ const { hasAccessByCodes } = useAccess();
     </BasicTable>
     <TenantPackageDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
 </template>