1

src/layout/components/aside.vue

@@ -3,22 +3,18 @@
     <div class="scrollbar">
       <el-scrollbar>
         <el-menu
-          :default-openeds="['/BusinessManage']"
           :default-active="route.path"
           active-text-color="#1890FF"
           background-color="#fff"
           text-color="#000"
           router
         >
-          <template v-for="(item, index) in routes[1].children" :key="index">
+          <template v-for="(item, index) in routes" :key="index">
             <el-sub-menu
               :index="'/' + item.path"
               v-if="item.children && item.children.filter((el) => !el.meta.hide).length > 0"
             >
               <template #title>
-                <el-icon v-if="item.meta.title === '门店管理'">
-                  <Notebook />
-                </el-icon>
                 <span> {{ item.meta.title }}</span>
               </template>
               <el-menu-item
@@ -30,22 +26,6 @@
               >
             </el-sub-menu>
             <el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide">
-              <el-icon v-if="item.meta.title === '门店管理'">
-                <Notebook />
-              </el-icon>
-              <el-icon v-if="item.meta.title === '工作台'">
-                <Calendar />
-              </el-icon>
-              <el-icon v-if="item.meta.title === '企业管理'">
-                <OfficeBuilding />
-              </el-icon>
-              <el-icon v-if="item.meta.title === 'C端管理'">
-                <User />
-              </el-icon>
-              <el-icon v-if="item.meta.title === '门店审核'">
-                <Tickets />
-              </el-icon>
-              <el-icon v-if="item.meta.title === '企业审核'"><Memo /></el-icon>
               <span>{{ item.meta.title }}</span>
             </el-menu-item>
           </template>
@@ -56,18 +36,12 @@
 </template>
 
 <script setup>
-import { routes } from '@/router/index'
 import { useUserStore } from '@/stores/user'
 
-const isAdmin =
-  useUserStore().userInfo?.jurisdictions &&
-  useUserStore().userInfo?.jurisdictions?.findIndex((item) => item.code === 'superadmin') !== -1
-
-console.log(useUserStore().userInfo)
-console.log(isAdmin)
-
+const userStore = useUserStore()
 const route = useRoute()
-console.log(routes)
+
+const routes = userStore.routerList
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -10,7 +10,7 @@
           <div class="userInfo">
             <div class="avatar"></div>
             <div class="username">
-              {{ userStore.userInfo?.nickname || userStore.userInfo?.username }}
+              {{ userStore.userInfo?.username }}
             </div>
           </div>
           <template #dropdown>
@@ -42,30 +42,31 @@
   </el-container>
 </template>
 
-<script lang="ts" setup>
+<script lang="js" setup>
 import Aside from './components/aside.vue'
 import { routes } from '@/router/index'
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 const userStore = useUserStore()
+// console.log(userStore.userInfo)
 
 const breadcrumbList = ref([])
 const route = useRoute()
 const router = useRouter()
 
-// const getBreadcrumbList = () => {
-//   const arr = []
-//   const obj = userStore[0].children.find((item) => item.path === route.path.split('/')[1])
-//   arr.push(obj)
-//   if (route.path.split('/').length > 2) {
-//     arr.push(obj.children.find((item) => item.path === route.path.split('/')[2]))
-//   }
-//   breadcrumbList.value = arr
-// }
-// watch(route, () => {
-//   getBreadcrumbList()
-// })
-// getBreadcrumbList()
+const getBreadcrumbList = () => {
+  const arr = []
+  const obj = userStore?.routerList.find((item) => item.path === route.path.split('/')[1])
+  arr.push(obj)
+  if (route.path.split('/').length > 2) {
+    arr.push(obj.children.find((item) => item.path === route.path.split('/')[2]))
+  }
+  breadcrumbList.value = arr
+}
+watch(route, () => {
+  getBreadcrumbList()
+})
+getBreadcrumbList()
 
 const logout = () => {
   userStore.logout()

src/router/index.js

@@ -14,111 +14,55 @@ export const constantRoutes = [
     component: () => import('@/views/Login/index.vue'),
     meta: { title: '登录' },
   },
+]
+
+// 动态路由配置（需要权限）
+export const asyncRoutes = [
   {
-    path: '/',
-    component: Layout,
-    redirect: `/SystemManage/UserManage`, // 重定向到第一个有权限的路由
+    path: 'SystemManage',
+    meta: { title: '系统管理', permissions: ['system'] },
+    redirect: `/SystemManage/UserManage`,
+    name: 'SystemManage',
     children: [
-      // {
-      //   path: 'WorkbenchPage',
-      //   name: 'WorkbenchPage',
-      //   component: () => import('@/views/WorkbenchPage/index.vue'),
-      //   meta: { title: '工作台', permissions: ['workbench'] },
-      // },
       {
-        path: 'SystemManage',
-        meta: { title: '系统管理' },
-        redirect: `/SystemManage/UserManage`,
-        children: [
-          {
-            path: 'UserManage',
-            name: 'UserManage',
-            component: () => import('@/views/UserManage/index.vue'),
-            meta: { title: '用户管理', permissions: ['RoleManage'] },
-          },
-          {
-            path: 'RoleManage',
-            name: 'RoleManage',
-            component: () => import('@/views/RoleManage/index.vue'),
-            meta: { title: '角色管理', permissions: ['RoleManage'] },
-          },
-          {
-            path: 'AuthManage',
-            name: 'AuthManage',
-            component: () => import('@/views/AuthManage/index.vue'),
-            meta: { title: '权限管理', permissions: ['AuthManage'] },
-          },
-        ],
+        path: 'UserManage',
+        name: 'UserManage',
+        component: () => import('@/views/UserManage/index.vue'),
+        meta: { title: '用户管理', permissions: ['user_management'] },
       },
       {
-        path: 'ModelManage',
-        name: 'ModelManage',
-        component: () => import('@/views/ModelManage/index.vue'),
-        meta: { title: '模版管理' },
-      }
+        path: 'RoleManage',
+        name: 'RoleManage',
+        component: () => import('@/views/RoleManage/index.vue'),
+        meta: { title: '角色管理', permissions: ['role_management'] },
+      },
+      {
+        path: 'AuthManage',
+        name: 'AuthManage',
+        component: () => import('@/views/AuthManage/index.vue'),
+        meta: { title: '权限管理', permissions: ['permission_management'] },
+      },
     ],
+  },
+  {
+    path: 'ModelManage',
+    name: 'ModelManage',
+    component: () => import('@/views/ModelManage/index.vue'),
+    meta: { title: '模版管理', permissions: ['template'] },
+  },
+  {
+    path: 'NoPermission',
+    name: 'NoPermission',
+    component: () => import('@/views/NoPermission/index.vue'),
+    meta: { title: 'NoPermission', hide: true },
   }
 ]
 
-// 动态路由配置（需要权限）
-// export const asyncRoutes = [
-//   // {
-//   //   path: 'WorkbenchPage',
-//   //   name: 'WorkbenchPage',
-//   //   component: () => import('@/views/WorkbenchPage/index.vue'),
-//   //   meta: { title: '工作台', permissions: ['workbench'] },
-//   // },
-//   {
-//     path: 'BusinessManage',
-//     name: 'BusinessManage',
-//     meta: { title: '门店管理', permissions: ['business'] },
-//     component: () => import('@/views/BusinessManage/index.vue'),
-//     children: [
-//       // {
-//       //   path: 'StoreManage',
-//       //   name: 'StoreManage',
-//       //   component: () => import('@/views/BusinessManage/index.vue'),
-//       //   meta: { title: '门店列表', permissions: ['business:store'] },
-//       // },
-//       // {
-//       //   path: 'DataManage',
-//       //   name: 'DataManage',
-//       //   component: () => import('@/views/BusinessManage/DataManage.vue'),
-//       //   meta: { title: '分类管理', permissions: ['business:data'] },
-//       // },
-//     ],
-//   },
-//   {
-//     path: 'EnterpriseManage',
-//     name: 'EnterpriseManage',
-//     component: () => import('@/views/EnterpriseManage/index.vue'),
-//     meta: { title: '企业管理', permissions: ['enterprise'] },
-//   },
-//   {
-//     path: 'CustomerManage',
-//     name: 'CustomerManage',
-//     component: () => import('@/views/CustomerManage/index.vue'),
-//     meta: { title: 'C端管理', permissions: ['superadmin'] },
-//   },
-//   {
-//     path: 'StoreReview',
-//     name: 'StoreReview',
-//     component: () => import('@/views/StoreReview/index.vue'),
-//     meta: { title: '门店审核', permissions: ['superadmin'] },
-//   },
-//   {
-//     path: 'EnterpriseAudit',
-//     name: 'EnterpriseAudit',
-//     component: () => import('@/views/EnterpriseAudit/index.vue'),
-//     meta: { title: '企业审核', permissions: ['superadmin'] },
-//   },
-// ]
-
 // 检查用户权限
 function hasPermission(permissions, userPermissions) {
   if (!permissions || permissions.length === 0) return true
+  if (useUserStore().userInfo?.isAdmin) return true
   if (!userPermissions || userPermissions.length === 0) return false
-
   return permissions.some(permission =>
     userPermissions.some(userPerm => userPerm.code === permission)
   )
@@ -138,7 +82,13 @@ function filterAsyncRoutes(routes, userPermissions) {
       filteredRoutes.push(temp)
     }
   })
-
+  if (filteredRoutes.length > 0) {
+    filteredRoutes.sort((a, b) => {
+      if (a.path === 'NoPermission') {
+        return 1
+      }
+    })
+  }
   return filteredRoutes
 }
 
@@ -147,14 +97,16 @@ export function generateRoutes(userPermissions) {
   const accessedRoutes = filterAsyncRoutes(asyncRoutes, userPermissions)
 
   // 如果有可访问的路由，创建主布局路由
+  // console.log('accessedRoutes', accessedRoutes)
   if (accessedRoutes.length > 0) {
     const mainRoute = {
       path: '/',
       component: Layout,
-      redirect: `/${accessedRoutes[0].path}`, // 重定向到第一个有权限的路由
+      name: 'index',
+      redirect: accessedRoutes[0].redirect || `/${accessedRoutes[0].path}`, // 重定向到第一个有权限的路由
       children: accessedRoutes,
     }
-
+    useUserStore().setRouterList(accessedRoutes || [])
     return [mainRoute, ...constantRoutes]
   }
 
@@ -167,64 +119,75 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
+console.log('routerinit')
 
 // 白名单
 const whiteList = ['/login']
 // 标记是否已添加动态路由
 let hasAddRoutes = false
 
+function flatten(arr) {
+  const res = []
+  arr.forEach(item => {
+    const { children, ...rest } = item
+    res.push(rest)               // 当前节点
+    if (children && children.length > 0) {
+      res.push(...flatten(children)) // 递归子节点
+    }
+  })
+  return res
+}
+
 // 全局前置导航守卫
 router.beforeEach(async (to, from, next) => {
   // 开启进度条
   NProgress.start()
 
-  const userStore = useUserStore()
-
   // 如果没有 token，并且不在白名单中，则重定向到登录
-  if (!userStore.token && !whiteList.includes(to.path)) {
+  if (!useUserStore().token && !whiteList.includes(to.path)) {
     return next('/login')
   }
-
   // 如果有 token 但还没有添加动态路由
-  // if (userStore.token && !hasAddRoutes) {
-  //   try {
-  //     // 获取用户权限
-  //     const userPermissions = userStore.userInfo?.jurisdictions || []
-
-  //     // 生成有权限的路由
-  //     const accessRoutes = generateRoutes(userPermissions)
-
-  //     // 清除现有路由
-  //     router.getRoutes().forEach(route => {
-  //       if (route.name && route.name !== 'login') {
-  //         router.removeRoute(route.name)
-  //       }
-  //     })
-
-  //     // 添加新的动态路由
-  //     accessRoutes.forEach(route => {
-  //       router.addRoute(route)
-  //     })
-
-  //     hasAddRoutes = true
-
-  //     // 如果当前访问的是根路径，重定向到第一个有权限的页面
-  //     if (to.path === '/') {
-  //       const firstRoute = accessRoutes.find(route => route.path === '/')
-  //       if (firstRoute && firstRoute.children && firstRoute.children.length > 0) {
-  //         return next(`/${firstRoute.children[0].path}`)
-  //       }
-  //     }
-
-  //     // 重新导航到目标路由
-  //     return next({ ...to, replace: true })
-  //   } catch (error) {
-  //     console.error('生成路由失败:', error)
-  //     // 清除用户信息并重定向到登录
-  //     userStore.logout()
-  //     return next('/login')
-  //   }
-  // }
+  if (useUserStore().token && !hasAddRoutes) {
+    try {
+      // 获取用户权限
+      const userPermissions = flatten(useUserStore().userInfo?.menus || [])
+
+
+      // 生成有权限的路由
+      const accessRoutes = generateRoutes(userPermissions)
+
+      // 清除现有路由
+      router.getRoutes().forEach(route => {
+        if (route.name && route.name !== 'login') {
+          router.removeRoute(route.name)
+        }
+      })
+
+      // 添加新的动态路由
+      accessRoutes.forEach(route => {
+        router.addRoute(route)
+      })
+
+      hasAddRoutes = true
+
+      // 如果当前访问的是根路径，重定向到第一个有权限的页面
+      if (to.path === '/') {
+        const firstRoute = accessRoutes.find(route => route.path === '/')
+        if (firstRoute && firstRoute.children && firstRoute.children.length > 0) {
+          return next(`/${firstRoute.children[0].path}`)
+        }
+      }
+
+      // 重新导航到目标路由
+      return next({ ...to, replace: true })
+    } catch (error) {
+      console.error('生成路由失败:', error)
+      // 清除用户信息并重定向到登录
+      useUserStore().logout()
+      return next('/login')
+    }
+  }
 
   next()
 })

src/stores/user.js

@@ -18,7 +18,7 @@ export const useUserStore = defineStore('user', () => {
     localStorage.setItem('userInfo', JSON.stringify(u))
   }
   const setRouterList = (u) => {
-    userInfo.value = u
+    routerList.value = u
     localStorage.setItem('routerList', JSON.stringify(u))
   }
   const logout = () => {
@@ -30,9 +30,9 @@ export const useUserStore = defineStore('user', () => {
     routerList.value = []
 
     // 重置路由
-    // import('@/router').then(({ resetRouter }) => {
-    //   resetRouter()
-    // })
+    import('@/router').then(({ resetRouter }) => {
+      resetRouter()
+    })
   }
-  return { token, setToken, setUserInfo, userInfo, logout }
+  return { token, setToken, setUserInfo, userInfo, logout, setRouterList, routerList }
 })

src/views/NoPermission/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1>暂无权限，请联系管理员添加权限</h1>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>