更新0.1.1版本

src/router/base.ts

@@ -0,0 +1,45 @@
+import type { AppRouteRecordRaw } from '@/router/types';
+import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+
+// 404 on a page
+export const ErrorPageRoute: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: Layout,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPage',
+      component: ErrorPage,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const RedirectRoute: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: RedirectName,
+  component: Layout,
+  meta: {
+    title: RedirectName,
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: RedirectName,
+      component: () => import('@/views/redirect/index.vue'),
+      meta: {
+        title: RedirectName,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};

src/router/constant.ts

@@ -0,0 +1,24 @@
+import { MainView } from '@/layout/components/Main'
+
+export const RedirectName = 'Redirect';
+
+export const ParentLayout = 'ParentLayout';
+
+export const ErrorPage = () => import('@/views/exception/404.vue');
+
+/**
+ * @description: default layout
+ */
+export const Layout = () => import('@/layout/index.vue');
+
+/**
+ * @description: parent-layout
+ */
+export const getParentLayout = (_name?: string) => {
+  return () =>
+    new Promise((resolve) => {
+      resolve({
+        name: PARENT_LAYOUT_NAME,
+      });
+    });
+};

src/router/constantRouterComponents.ts

@@ -0,0 +1,17 @@
+import { RouterView } from 'vue-router'
+import { renderIcon } from '@/utils/index'
+import { DashboardOutlined } from '@vicons/antd'
+// import { RouterTransition } from '@/components/transition'
+
+//前端路由映射表
+export const constantRouterComponents = {
+  'Layout': () => import('@/layout/index.vue'), //布局
+  'DashboardConsole': () => import('@/views/dashboard/console/console.vue'), // 主控台
+  'DashboardMonitor': () => import('@/views/dashboard/monitor/monitor.vue'), // 监控页
+  'DashboardWorkplace': () => import('@/views/dashboard/workplace/workplace.vue'), // 工作台
+}
+
+//前端路由图标映射表
+export const constantRouterIcon = {
+  'DashboardOutlined': renderIcon(DashboardOutlined)
+}

src/router/generator-routers.ts

@@ -0,0 +1,72 @@
+import { adminMenus } from '@/api/system/menu'
+import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
+import router from '@/router/index'
+import { constantRouter, asyncRoutes } from '@/router/index'
+import { NEmpty } from 'naive-ui'
+import { RouteRecordRaw } from 'vue-router'
+
+/**
+ * 格式化 后端 结构信息并递归生成层级路由表
+ *
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const routerGenerator = (routerMap, parent) => {
+  return routerMap.map(item => {
+    const currentRouter = {
+      // 路由地址 动态拼接生成如 /dashboard/workplace
+      path: `${ parent && parent.path || '' }/${ item.path }`,
+      // 路由名称，建议唯一
+      name: item.name || '',
+      // 该路由对应页面的 组件
+      component: constantRouterComponents[item.component],
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        ...item.meta,
+        label: item.meta.title,
+        icon: constantRouterIcon[item.meta.icon] || null,
+        permission: item.meta.permission || null
+      }
+    }
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    currentRouter.path = currentRouter.path.replace('//', '/')
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect)
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = routerGenerator(item.children, currentRouter)
+    }
+    return currentRouter
+  })
+}
+
+
+/**
+ * 动态生成菜单
+ * @param token
+ * @returns {Promise<Router>}
+ */
+export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
+  return new Promise((resolve, reject) => {
+    adminMenus()
+      .then((result) => {
+        const routeList = routerGenerator(result)
+        // 设置模块重定向到菜单
+        // routeList.forEach((item) => {
+        //   if (item.children?.length > 0 && !item.redirect) {
+        //     item.redirect = { name: item.children[0].name }
+        //   }
+        // })
+        const asyncRoutesList = [...constantRouter, ...routeList]
+        asyncRoutesList.forEach(item => {
+          router.addRoute(item)
+        })
+        resolve(asyncRoutesList)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}

src/router/index.ts

@@ -0,0 +1,56 @@
+import { App } from 'vue'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { ErrorPageRoute, RedirectRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum';
+import { createRouterGuards } from './router-guards'
+import 'nprogress/css/nprogress.css' // 进度条样式
+
+const modules = import.meta.globEager('./modules/**/*.ts');
+
+const routeModuleList: AppRouteModule[] = [];
+
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  routeModuleList.push(...modList);
+});
+
+export const RootRoute: AppRouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root',
+  },
+};
+
+export const LoginRoute: AppRouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+//需要验证权限
+export const asyncRoutes = [ErrorPageRoute, ...routeModuleList];
+
+
+//普通路由 无需验证权限
+export const constantRouter = [LoginRoute, RootRoute, RedirectRoute]
+
+const router = createRouter({
+  history: createWebHashHistory(''),
+  routes: constantRouter,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export function setupRouter(app: App) {
+  app.use(router)
+  // 创建路由守卫
+  createRouterGuards(router)
+}
+
+export default router

src/router/modules/dashboard.ts

@@ -0,0 +1,68 @@
+import { h } from 'vue'
+import { NIcon } from 'naive-ui'
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { MainView } from '@/layout/components/Main'
+import { DashboardOutlined } from '@vicons/antd'
+
+function renderIcon(icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const routeName = 'dashboard'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/dashboard',
+    name: routeName,
+    redirect: '/dashboard/console',
+    component: Layout,
+    meta: {
+      title: 'Dashboard',
+      icon: renderIcon(DashboardOutlined),
+      permission: ['dashboard_console', 'dashboard_console', 'dashboard_workplace']
+    },
+    children: [
+      {
+        path: 'console',
+        name: `${ routeName }_console`,
+        meta: {
+          title: '主控台',
+          permission: ['dashboard_console']
+        },
+        component: () => import('@/views/dashboard/console/console.vue')
+      },
+      // {
+      //   path: 'monitor',
+      //   name: `${ routeName }_monitor`,
+      //   meta: {
+      //     title: '监控页',
+      //     permission: ['dashboard_monitor']
+      //   },
+      //   component: () => import('@/views/dashboard/monitor/monitor.vue')
+      // },
+      {
+        path: 'workplace',
+        name: `${ routeName }_workplace`,
+        meta: {
+          title: '工作台',
+          keepAlive:true,
+          permission: ['dashboard_workplace']
+        },
+        component: () => import('@/views/dashboard/workplace/workplace.vue')
+      }
+    ]
+  }
+]
+
+export default routes

src/router/router-guards.ts

@@ -0,0 +1,151 @@
+import { toRefs } from 'vue'
+import { isNavigationFailure, Router } from 'vue-router'
+import { useUserStoreWidthOut } from '@/store/modules/user'
+import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute'
+import NProgress from 'nprogress' // progress bar
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { storage } from '@/utils/Storage'
+import { debounce } from '@/utils/lodashChunk'
+import { useGlobSetting } from '@/hooks/setting'
+import { PageEnum } from '@/enums/pageEnum'
+
+const globSetting = useGlobSetting()
+
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whitePathList = ['/login'] // no redirect whitelist
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN
+const DEFAULT_PATH = PageEnum.BASE_HOME
+
+
+const permissionMode = globSetting.permissionMode //ROLE 前端固定角色  BACK 动态获取
+
+// 是否需要从后端获取菜单
+const isGetMenus = debounce(
+  ({ to, from, next, hasRoute, router }) => {
+    const userStore = useUserStoreWidthOut();
+    const asyncRouteStore = useAsyncRouteStoreWidthOut();
+    userStore.GetInfo().then(res => {
+      asyncRouteStore.generateRoutes(res).then(() => {
+        // 根据roles权限生成可访问的路由表
+        // 动态添加可访问路由表
+        asyncRouteStore.getRouters().forEach((item) => {
+          router.addRoute(item)
+        });
+        debugger
+        // if (whitePathList.includes(to.name as string)) return
+        if (!hasRoute) {
+          // 请求带有 redirect 重定向时，登录自动重定向到该地址
+          const redirect = decodeURIComponent((from.query.redirect || '') as string)
+          if (to.path === redirect) {
+            next({ ...to, replace: true })
+          } else {
+            // 跳转到目的路由
+            next({ ...to, replace: true })
+          }
+        } else {
+          next()
+        }
+      }).catch(() => next({ path: defaultRoutePath }))
+    })
+  },
+  1800,
+  { leading: true }
+)
+
+
+export function createRouterGuards(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const asyncRouteStore = useAsyncRouteStoreWidthOut();
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start()
+
+    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+      next(PageEnum.BASE_HOME);
+      return;
+    }
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      next();
+      return;
+    }
+
+    const token = storage.get(ACCESS_TOKEN)
+    const roles = storage.get('roles')
+
+    if (!token) {
+
+      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+        path: LOGIN_PATH,
+        replace: true,
+      };
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        };
+      }
+      next(redirectData);
+      return;
+    }
+
+    if (asyncRouteStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    const userInfo = await userStore.GetInfo()
+
+    const routes = await asyncRouteStore.generateRoutes(userInfo)
+
+    // 动态添加可访问路由表
+    routes.forEach((item) => {
+      router.addRoute(item)
+    });
+
+    const redirectPath = (from.query.redirect || to.path) as string;
+    const redirect = decodeURIComponent(redirectPath);
+    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    asyncRouteStore.setDynamicAddedRoute(true);
+    next(nextData);
+    NProgress.done()
+  })
+
+  router.afterEach((to, from, failure) => {
+    document.title = (to?.meta?.title as string) || document.title
+    if (isNavigationFailure(failure)) {
+      //console.log('failed navigation', failure)
+    }
+    const asyncRouteStore = useAsyncRouteStoreWidthOut();
+    // 在这里设置需要缓存的组件名称
+    const keepAliveComponents = asyncRouteStore.keepAliveComponents
+    const currentComName:any = to.matched.find((item) => item.name == to.name)?.name
+    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
+      // 需要缓存的组件
+      keepAliveComponents.push(currentComName)
+    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
+      // 不需要缓存的组件
+      const index = asyncRouteStore.keepAliveComponents.findIndex(
+        (name) => name == currentComName
+      )
+      if (index != -1) {
+        keepAliveComponents.splice(index, 1)
+      }
+    }
+    asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
+    NProgress.done() // finish progress bar
+  })
+
+  router.onError((error) => {
+    console.log(error, '路由错误')
+  })
+}

src/router/types.ts

@@ -0,0 +1,19 @@
+import { RoleEnum } from '@/enums/roleEnum'
+
+export interface Meta {
+  // 名称
+  title: string
+  // 是否忽略权限
+  ignoreAuth?: boolean
+  roles?: RoleEnum[]
+  // 是否不缓存
+  noKeepAlive?: boolean
+  // 是否固定在tab上
+  affix?: boolean
+  // tab上的图标
+  icon?: string
+  // 跳转地址
+  frameSrc?: string
+  // 外链跳转地址
+  externalLink?: string
+}