🐞 fix: 修复菜单权限判断错误的问题

src/components/Menu/index.vue

@@ -25,23 +25,23 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { onMounted, ref } from 'vue'
 import { routes } from '@/router'
 import { useUserStore } from '@/store/modules/user'
 import { useRouteListener } from '@/utils/route-listener'
 
 const userStore = useUserStore()
-const user = userStore.getInfo()
+const user = ref({})
+const menuData = ref([])
 
 const { selectedKey } = useRouteListener()
 
-// 判断用户是否有权限访问该路由
 const hasPermission = (route) => {
-    if (!route.meta || !route.meta.permission || !user.roles) return true
-    return route.meta.permission.some((perm) => user.roles.includes(perm))
+    if (!route.meta || !route.meta.permission) return true
+    if(!user.value.roles || user.value.roles.length === 0) return false
+    return route.meta.permission.some((perm) => user.value.roles.includes(perm))
 }
 
-// 递归构建菜单数据
 const generateMenu = (routes, parentPath = '') => {
     return routes
         .filter((route) => hasPermission(route) && !(route.meta && route.meta.hideInMenu))
@@ -62,13 +62,8 @@ const generateMenu = (routes, parentPath = '') => {
         })
 }
 
-
-const useMenuData = () => {
-    const menuData = computed(() => {
-        return generateMenu(routes)
-    })
-    return { menuData }
-}
-
-const { menuData } = useMenuData()
+onMounted(async () => {
+    user.value = await userStore.getInfo()
+    menuData.value = generateMenu(routes)
+})
 </script>