refactor(projects): 修改了动态侧边栏的生成方法

mock/module/user.ts

@@ -15,58 +15,69 @@ const userInfo = {
   token,
   permissions: [
     {
-      label: '主控台',
-      key: 'dashboard_console',
-      icon: 'icon-park-outline:alarm',
-    },
-    {
-      label: '监控页',
-      key: 'dashboard_monitor',
-      icon: 'icon-park-outline:anchor',
-    },
-    {
-      label: 'test1',
-      key: '/test1',
-      icon: 'icon-park-outline:alarm',
-    },
-    {
-      label: 'test2',
-      key: '/test2',
-      icon: 'icon-park-outline:pic',
-    },
-    {
-      label: 'test3',
-      key: '/test3',
-      icon: 'icon-park-outline:tool',
-    },
-    {
-      label: '舞，舞，舞',
-      key: 'dance-dance-dance',
-      icon: 'icon-park-outline:command',
+      name: 'dashboard',
+      path: '/dashboard',
+      meta: {
+        title: '分析页',
+        requiresAuth: true,
+        icon: 'icon-park-outline:analysis',
+      },
       children: [
         {
-          label: '饮品',
-          key: 'beverage',
-          children: [
-            {
-              label: '威士忌',
-              key: 'whisky',
-            },
-          ],
+          name: 'dashboard_console',
+          path: '/dashboard/console',
+          meta: {
+            title: '主控台',
+            requiresAuth: true,
+            icon: 'icon-park-outline:alarm',
+          },
         },
         {
-          label: '食物',
-          key: 'food',
-          children: [
-            {
-              label: '三明治',
-              key: 'sandwich',
-            },
-          ],
+          name: 'dashboard_monitor',
+          path: '/dashboard/monitor',
+          meta: {
+            title: '监控页',
+            requiresAuth: true,
+            icon: 'icon-park-outline:anchor',
+          },
+        },
+      ],
+    },
+    {
+      name: 'test',
+      path: '/test',
+      meta: {
+        title: '测试专题',
+        requiresAuth: true,
+        icon: 'icon-park-outline:ambulance',
+      },
+      children: [
+        {
+          name: 'test1',
+          path: '/test/test1',
+          meta: {
+            title: '测试专题1',
+            requiresAuth: true,
+            icon: 'icon-park-outline:alarm',
+          },
         },
         {
-          label: '过去增多，未来减少',
-          key: 'the-past-increases-the-future-recedes',
+          name: 'test2',
+          path: '/test/test2',
+          meta: {
+            title: '测试专题2',
+            requiresAuth: true,
+            icon: 'icon-park-outline:pic',
+          },
+        },
+        {
+          name: 'test3',
+          path: '/test/test3',
+          meta: {
+            title: '测试专题3',
+            requiresAuth: true,
+            icon: 'icon-park-outline:tool',
+          },
         },
       ],
     },

src/router/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { setupRouterGuard } from './guard';
 import { BasicLayout } from '../layouts/index';
+import { constantRoutes } from './routes';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -11,9 +12,9 @@ const routes: RouteRecordRaw[] = [
     component: BasicLayout,
     children: [
       {
-        path: '/test1',
+        path: '/test/test1',
         name: 'test1',
-        component: () => import('~/src/views/test/test1.vue'),
+        component: () => import(`@/views/test/test1.vue`),
         meta: {
           title: '测试1',
           icon: 'icon-park-outline:game-three',
@@ -21,9 +22,9 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: '/test2',
+        path: '/test/test2',
         name: 'test2',
-        component: () => import('~/src/views/test/test2.vue'),
+        component: () => import('@/views/test/test2.vue'),
         meta: {
           title: '测试2',
           icon: 'carbon:aperture',
@@ -31,15 +32,16 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: '/test3',
+        path: '/test/test3',
         name: 'test3',
-        component: () => import('~/src/views/test/test3.vue'),
+        component: () => import('@/views/test/test3.vue'),
         meta: {
           title: '测试3',
           icon: 'icon-park-outline:music-list',
           requiresAuth: true,
         },
       },
+      ...constantRoutes,
     ],
   },
   {
@@ -50,30 +52,6 @@ const routes: RouteRecordRaw[] = [
       title: '登录',
     },
   },
-  {
-    path: '/no-permission',
-    name: 'no-permission',
-    component: () => import('@/views/inherit-page/not-permission/index.vue'),
-    meta: {
-      title: '无权限',
-    },
-  },
-  {
-    path: '/service-error',
-    name: 'service-error',
-    component: () => import('@/views/inherit-page/service-error/index.vue'),
-    meta: {
-      title: '服务器错误',
-    },
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    name: '404',
-    component: () => import('@/views/inherit-page/not-found/index.vue'),
-    meta: {
-      title: '错误404',
-    },
-  },
 ];
 
 const { VITE_HASH_ROUTE = 'N', VITE_BASE_URL } = import.meta.env;

src/router/routes/index.ts

@@ -1,49 +1,6 @@
-import { BasicLayout } from '@/layouts/index';
+// import { BasicLayout } from '@/layouts/index';
 
-export const constantRoutes: AppRoute.Route[] = [
-  {
-    path: '/',
-    name: 'root',
-    redirect: '/test1',
-    component: BasicLayout,
-    children: [
-      {
-        path: '/test1',
-        name: 'test1',
-        component: () => import('~/src/views/test/test1.vue'),
-        meta: {
-          title: '测试1',
-          icon: 'icon-park-outline:game-three',
-          requiresAuth: true,
-        },
-      },
-      {
-        path: '/test2',
-        name: 'test2',
-        component: () => import('~/src/views/test/test2.vue'),
-        meta: {
-          title: '测试2',
-          icon: 'carbon:aperture',
-          requiresAuth: true,
-        },
-      },
-      {
-        path: '/test3',
-        name: 'test3',
-        component: () => import('~/src/views/test/test3.vue'),
-        meta: {
-          title: '测试3',
-          icon: 'icon-park-outline:music-list',
-          requiresAuth: true,
-        },
-      },
-    ],
-  },
-  {
-    path: '/login',
-    name: 'login',
-    component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue
-  },
+export const constantRoutes = [
   {
     path: '/no-permission',
     name: 'no-permission',

src/service/http/instance.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { getToken } from '@/utils';
 
 /**
  * @description: 封装axios请求类
@@ -33,8 +34,7 @@ export default class createAxiosInstance {
     this.instance.interceptors.request.use(
       (config: AxiosRequestConfig) => {
         // 一般会请求拦截里面加token
-        // const token = localStorage.getItem('token') as string;
-        // config.headers!.Authorization = token;
+        config.headers!.Authorization = getToken();
         return config;
       },
       (err: any) => Promise.reject(err),

src/store/modules/route.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { renderIcon } from '@/utils/icon';
+import type { MenuOption } from 'naive-ui';
 
 interface RuutesStatus {
   menus: any;
@@ -15,13 +16,21 @@ export const useRouteStore = defineStore('route-store', {
       this.menus = this.transformAuthRoutesToMenus(data);
     },
     // 将返回的路由表渲染成侧边栏
-    transformAuthRoutesToMenus(data: Auth.UserInfoPermissions[]) {
+    transformAuthRoutesToMenus(data: Auth.UserInfoPermissions[]): MenuOption[] {
       return data.map((item) => {
-        item.icon = renderIcon(item.icon);
-        if (item.children) {
-          this.transformAuthRoutesToMenus(item.children);
+        const target: MenuOption = {
+          label: item.meta.title,
+          key: item.path,
+        };
+        // 判断有无图标
+        if (item.meta.icon) {
+          target.icon = renderIcon(item.meta.icon);
         }
-        return item;
+        // 判断子元素
+        if (item.children) {
+          target.children = this.transformAuthRoutesToMenus(item.children);
+        }
+        return target;
       });
     },
   },

src/types/business.d.ts

@@ -29,9 +29,9 @@ declare namespace Auth {
     permissions: UserInfoPermissions[];
   }
   interface UserInfoPermissions {
-    label: string;
-    key: string;
-    icon: any;
-    children: UserInfoPermissions[];
+    name: string;
+    path: string;
+    meta: AppRoute.RouteMeta;
+    children?: UserInfoPermissions[];
   }
 }

src/utils/auth.ts

@@ -1,5 +1,6 @@
 import { setLocal, getLocal, removeLocal } from './storage';
 import { EnumStorageKey } from '@/enum';
+const DURATION = 6 * 60 * 60;
 
 /* 获取当前token */
 export function getToken() {
@@ -7,7 +8,7 @@ export function getToken() {
 }
 /* 设置token */
 export function setToken(data: string) {
-  setLocal(EnumStorageKey.token, data);
+  setLocal(EnumStorageKey.token, data, DURATION);
 }
 /* 移除token */
 export function removeToken() {

src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './auth';
+export * from './icon';
+export * from './is';
+export * from './storage';

src/utils/token.ts

@@ -1,15 +0,0 @@
-import { setLocal, getLocal, removeLocal } from './storage';
-const TOKEN_CODE = 'access_token';
-const DURATION = 6 * 60 * 60;
-
-export function getToken() {
-  return getLocal(TOKEN_CODE);
-}
-
-export function setToken(token: any) {
-  setLocal(TOKEN_CODE, token, DURATION);
-}
-
-export function removeToken() {
-  removeLocal(TOKEN_CODE);
-}