novalon-manage-web/src/layouts/DefaultLayout.vue

@@ -17,70 +17,11 @@
         active-text-color="#409eff"
         router
       >
-        <el-menu-item index="/dashboard">
-          <el-icon><Odometer /></el-icon>
-          <span>仪表盘</span>
-        </el-menu-item>
-        <el-sub-menu index="system">
-          <template #title>
-            <el-icon><Setting /></el-icon>
-            <span>系统管理</span>
-          </template>
-          <el-menu-item index="/users">
-            用户管理
-          </el-menu-item>
-          <el-menu-item index="/roles">
-            角色管理
-          </el-menu-item>
-          <el-menu-item index="/menus">
-            菜单管理
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="config">
-          <template #title>
-            <el-icon><Tools /></el-icon>
-            <span>系统配置</span>
-          </template>
-          <el-menu-item index="/dict">
-            字典管理
-          </el-menu-item>
-          <el-menu-item index="/sys/config">
-            参数配置
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="audit">
-          <template #title>
-            <el-icon><Document /></el-icon>
-            <span>审计中心</span>
-          </template>
-          <el-menu-item index="/loginlog">
-            登录日志
-          </el-menu-item>
-          <el-menu-item index="/oplog">
-            操作日志
-          </el-menu-item>
-          <el-menu-item index="/exceptionlog">
-            异常日志
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="notify">
-          <template #title>
-            <el-icon><Bell /></el-icon>
-            <span>通知中心</span>
-          </template>
-          <el-menu-item index="/notice">
-            通知公告
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="file">
-          <template #title>
-            <el-icon><Folder /></el-icon>
-            <span>文件管理</span>
-          </template>
-          <el-menu-item index="/files">
-            文件列表
-          </el-menu-item>
-        </el-sub-menu>
+        <menu-item
+          v-for="menu in menuTree"
+          :key="menu.id"
+          :menu="menu"
+        />
       </el-menu>
     </el-aside>
     <el-container>
@@ -123,22 +64,24 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import {
-  Odometer, Setting, Tools, Document, Bell, Folder,
-  Fold, Expand
-} from '@element-plus/icons-vue'
+import { Fold, Expand } from '@element-plus/icons-vue'
+import { usePermissionStore } from '@/stores/permission'
+import MenuItem from '@/components/MenuItem.vue'
 
 const router = useRouter()
 const route = useRoute()
 const collapsed = ref(false)
 const username = ref(localStorage.getItem('username') || 'Admin')
+const permissionStore = usePermissionStore()
 
 const activeMenu = computed(() => route.path)
+const menuTree = computed(() => permissionStore.menus)
 
 const handleCommand = (command: string) => {
   if (command === 'profile') {
     router.push('/profile')
   } else if (command === 'logout') {
+    permissionStore.clearPermissionData()
     localStorage.clear()
     router.push('/login')
   }
@@ -148,6 +91,8 @@ onMounted(() => {
   const token = localStorage.getItem('token')
   if (!token) {
     router.push('/login')
+  } else if (!permissionStore.loaded) {
+    permissionStore.initFromStorage()
   }
 })
 </script>

novalon-manage-web/src/utils/permission.ts

@@ -0,0 +1,50 @@
+import { usePermissionStore } from '@/stores/permission'
+
+export interface PermissionMapping {
+  [key: string]: string | string[]
+}
+
+const permissionMapping: PermissionMapping = {
+  'GET /users': 'user:list',
+  'POST /users': 'user:create',
+  'PUT /users': 'user:update',
+  'DELETE /users': 'user:delete',
+  'GET /roles': 'role:list',
+  'POST /roles': 'role:create',
+  'PUT /roles': 'role:update',
+  'DELETE /roles': 'role:delete',
+  'GET /menus': 'menu:list',
+  'POST /menus': 'menu:create',
+  'PUT /menus': 'menu:update',
+  'DELETE /menus': 'menu:delete',
+  'GET /dict': 'dict:list',
+  'POST /dict': 'dict:create',
+  'PUT /dict': 'dict:update',
+  'DELETE /dict': 'dict:delete',
+  'GET /sys/config': 'config:list',
+  'POST /sys/config': 'config:create',
+  'PUT /sys/config': 'config:update',
+  'DELETE /sys/config': 'config:delete',
+}
+
+export function checkApiPermission(method: string, url: string): boolean {
+  const permissionStore = usePermissionStore()
+  
+  const key = `${method.toUpperCase()} ${url.split('?')[0]}`
+  const requiredPermission = permissionMapping[key]
+  
+  if (!requiredPermission) {
+    return true
+  }
+  
+  if (Array.isArray(requiredPermission)) {
+    return requiredPermission.some(p => permissionStore.hasPermission(p))
+  }
+  
+  return permissionStore.hasPermission(requiredPermission)
+}
+
+export function getRequiredPermission(method: string, url: string): string | string[] | null {
+  const key = `${method.toUpperCase()} ${url.split('?')[0]}`
+  return permissionMapping[key] || null
+}

novalon-manage-web/src/utils/request.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosRequestConfig } from 'axios'
 import { generateSignatureHeaders } from './signature'
+import { checkApiPermission } from './permission'
 
 const request = axios.create({
   baseURL: '/api',
@@ -37,6 +38,15 @@ request.interceptors.request.use(
     config.headers = config.headers || {}
     Object.assign(config.headers, signatureHeaders)
     
+    if (!checkApiPermission(method, url)) {
+      const error = new Error('无权限访问此接口')
+      ;(error as any).response = {
+        status: 403,
+        data: { message: '无权限访问此接口' }
+      }
+      return Promise.reject(error)
+    }
+    
     return config
   },
   (error) => Promise.reject(error)