修改

src/layout/parts/Sidebar.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { siteInfo, menuInfo } from '@/layout/site'
+import { siteInfo } from '@/layout/site'
 import { UserStore } from '@/store/user'
 import menuItem from './sidebar/items.vue'
 import { useRoute } from 'vue-router'
@@ -34,7 +34,6 @@ const route = useRoute()
 
 const onRoutes = ref(route.path)
 const userStore = UserStore()
-const styleInfo = ref(menuInfo.info)
 let items = ref(userStore.menus)
 const user = computed(() => userStore.user)
 

src/router/guard.js

@@ -2,6 +2,7 @@ import { AxiosWrapper } from '@/utils/axios-wrapper'
 import { checkResult } from '@/utils/checkResult'
 import { UserStore } from '@/store/user'
 import { cloneDeep, omit } from 'lodash-es'
+import { translateRouteTitle } from '@/utils/i18n'
 // 检查路由是否存在
 const hasNecessaryRoute = (to, router) => {
   // 将默认注册的路由平铺成一维数组
@@ -30,13 +31,18 @@ const getUserMeta = async (token) => {
 // 注册前置守卫
 export const registerBeforeRouter = async (router) => {
   router.beforeEach(async (to, from, next) => {
-    document.title = `${to.meta.title} `
+    document.title = `${translateRouteTitle(to.meta.title)} `
     const token = localStorage.getItem('token')
+    if (to.path === '/login') {
+      next()
+      return
+    }
     if (token) {
       if (to.path === '/login') next()
       const menus = await getUserMeta(token)
       // 检查目的地路由是否注册
       const hasRoute = hasNecessaryRoute(to, router)
+      console.log(hasRoute)
       if (hasRoute) {
         // 注册了直接进入
         next()

src/router/index.js

@@ -1,82 +1,100 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { registerBeforeRouter } from './guard'
 export const homeIndex = () => import('@/views/home/index.vue')
 export const Layout = () => import('@/layout/index.vue')
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/redirect',
-      component: Layout,
-      meta: { hidden: true },
-      children: [
-        {
-          path: '/redirect/:path(.*)',
-          component: () => import('@/views/redirect/index.vue')
-        }
-      ]
-    },
-    {
-      path: '/login',
-      name: 'Login',
-      meta: { title: '系统登录' },
-      component: () => import('@/views/login/index.vue')
-    },
-    {
-      path: '/',
-      component: Layout,
-      children: [
-        {
-          path: '/',
-          name: 'dashboard',
-          meta: {
-            title: 'dashboard',
-            affix: true,
-            keepAlive: true,
-            alwaysShow: false
-          },
-          component: () => import('@/views/home/index.vue')
+// 静态路由
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    meta: { title: '系统登录' },
+    component: () => import('@/views/login/index.vue')
+  },
+  {
+    path: '/',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        name: 'dashboard',
+        meta: {
+          title: 'dashboard',
+          affix: true,
+          keepAlive: true,
+          alwaysShow: false
         },
-        {
-          path: '/system',
-          meta: { title: 'system' },
-          children: [
-            {
-              path: '/system/menus',
-              meta: { title: 'menus' },
-              component: () => import('@/views/system/menus/index.vue')
-            },
-            {
-              path: '/system/role',
-              meta: { title: 'role' },
-              component: () => import('@/views/system/role/index.vue')
-            },
-            {
-              path: '/system/dict',
-              meta: { title: 'dict' },
-              component: () => import('@/views/system/dict/index.vue')
-            },
-            {
-              path: '/system/dictData',
-              meta: { title: 'dictData' },
-              component: () => import('@/views/system/dictData/index.vue')
-            },
-            {
-              path: '/system/config',
-              meta: { title: 'config' },
-              component: () => import('@/views/system/config/index.vue')
-            },
-            {
-              path: '/system/module',
-              meta: { title: 'module' },
-              component: () => import('@/views/system/module/index.vue')
-            }
-          ]
-        }
-      ]
-    }
-  ]
+        component: () => import('@/views/home/index.vue')
+      },
+      {
+        path: '/system',
+        meta: { title: 'system' },
+        children: [
+          {
+            path: '/system/menus',
+            meta: { title: 'menus' },
+            component: () => import('@/views/system/menus/index.vue')
+          },
+          {
+            path: '/system/role',
+            meta: { title: 'role' },
+            component: () => import('@/views/system/role/index.vue')
+          },
+          {
+            path: '/system/dict',
+            meta: { title: 'dict' },
+            component: () => import('@/views/system/dict/index.vue')
+          },
+          {
+            path: '/system/dictData',
+            meta: { title: 'dictData' },
+            component: () => import('@/views/system/dictData/index.vue')
+          },
+          {
+            path: '/system/config',
+            meta: { title: 'config' },
+            component: () => import('@/views/system/config/index.vue')
+          },
+          {
+            path: '/system/module',
+            meta: { title: 'module' },
+            component: () => import('@/views/system/module/index.vue')
+          }
+        ]
+      },
+      {
+        path: '401',
+        component: () => import('@/views/error-page/401.vue'),
+        meta: { hidden: true }
+      },
+      {
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: { hidden: true }
+      }
+    ]
+  }
+]
+
+/**
+ * 创建路由
+ */
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes,
+  // 刷新时，滚动条位置还原
+  scrollBehavior: () => ({ left: 0, top: 0 })
 })
 registerBeforeRouter(router)
 export default router

src/store/api/menu.js

@@ -1,13 +0,0 @@
-import { defineStore } from 'pinia'
-import { get, omit } from 'lodash'
-import { AxiosWrapper } from '@/utils/axios-wrapper'
-const axios = new AxiosWrapper()
-export const MenuStore = defineStore('menu', () => {
-  const listRoutes = async (payload) => {
-    const type = get(payload, 'type')
-    const np = omit(payload, 'type')
-    const res = await axios.$post(`/menu/${type}`, np)
-    return res
-  }
-  return { listRoutes }
-})

src/store/modules/permission.js

@@ -1,5 +1,7 @@
-// import { router } from '@/router'
+import { constantRoutes } from '@/router/index'
 import { store } from '@/store'
+import { MenusStore } from '@/store/api/system/menus'
+
 const modules = import.meta.glob('../../views/**/**.vue')
 const Layout = () => import('@/layout/index.vue')
 
@@ -71,8 +73,7 @@ export const usePermissionStore = defineStore('permission', () => {
 
   // actions
   function setRoutes(newRoutes) {
-    console.log(newRoutes)
-    // routes.value = router.concat(newRoutes)
+    routes.value = constantRoutes.concat(newRoutes)
   }
   /**
    * 生成动态路由
@@ -81,20 +82,19 @@ export const usePermissionStore = defineStore('permission', () => {
    * @returns
    */
   function generateRoutes(roles) {
-    console.log(roles);
-    // return new Promise((resolve, reject) => {
-    //   // 接口获取所有路由
-    //   MenuStore.listRoutes
-    //     .then(({ data: asyncRoutes }) => {
-    //       // 根据角色获取有访问权限的路由
-    //       const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-    //       setRoutes(accessedRoutes)
-    //       resolve(accessedRoutes)
-    //     })
-    //     .catch((error) => {
-    //       reject(error)
-    //     })
-    // })
+    return new Promise((resolve, reject) => {
+      // 接口获取所有路由
+      MenusStore()
+        .then(({ data: asyncRoutes }) => {
+          // 根据角色获取有访问权限的路由
+          const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+          setRoutes(accessedRoutes)
+          resolve(accessedRoutes)
+        })
+        .catch((error) => {
+          reject(error)
+        })
+    })
   }
   /**
    * 获取与激活的顶部菜单项相关的混合模式左侧菜单集合

src/views/system/menus/parts/parts/info.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="left" label-width="120px">
+  <el-form label-position="left" label-width="80px">
     <el-form-item label="菜单名称">
       <el-input v-model="form.name" placeholder="请填写菜单名称"></el-input>
     </el-form-item>