feat: 一维路由以及缓存name

.husky/_/applypatch-msg

@@ -1,2 +1,2 @@
-#!/usr/bin/env sh
+#!/usr/bin/env sh
 . "${0%/*}/h"

.husky/_/commit-msg

@@ -1,2 +1,4 @@
-#!/usr/bin/env sh
+#!/usr/bin/env sh
-. "${0%/*}/h"
+. "$(dirname -- "$0")/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/_/pre-commit

@@ -1,2 +1,5 @@
-#!/usr/bin/env sh
+#!/bin/sh
-. "${0%/*}/h"
+
+. "$(dirname "$0")/husky.sh"
+
+npm run lint-staged

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from "vue-router";
-import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
+import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
 import { initSetRouter } from "@/router/route-output";
 import NProgress from "@/config/nprogress";
 import pinia from "@/store/index";
@@ -11,7 +11,7 @@ import { useUserInfoStore } from "@/store/user-info";
  * @method createRouter(options: RouterOptions): Router
  * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
  */
-export const router = createRouter({
+const router = createRouter({
   history: createWebHashHistory(),
   /**
    * 说明：
@@ -19,7 +19,7 @@ export const router = createRouter({
    * 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
    * 防止 404、401 不在 layout 布局中，不设置的话，404、401界面将全屏显示
    */
-  routes: [...dynamicRoutes, ...staticRoutes, ...notFoundAndNoPower] // 这里只需要设置兜底路由即可，其它的路由通过addRoute动态添加
+  routes: [...staticRoutes, ...notFoundAndNoPower] // 这里只需要设置兜底路由即可，其它的路由通过addRoute动态添加
 });
 
 // 路由加载前

src/router/route-output.ts

@@ -1,13 +1,53 @@
 import { dynamicRoutes } from "@/router/route";
 import pinia from "@/store/index";
+import router from "@/router/index.ts";
 import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/user-info";
-// import { useRoutesListStore } from "@/store/route-list";
+import { useRoutesListStore } from "@/store/route-list";
 
+/**
+ * 1、过滤有权限的路由树，缓存，addRoutes添加路由
+ * 2、通过有权限的路由树生成路由name数组，缓存
+ */
 export function initSetRouter() {
-  // 过滤后的结果
+  const store = useRoutesListStore(pinia);
+  // 根据角色权限过滤树
   let filteredData = filterByRole(dynamicRoutes[0].children);
-  console.log("路由处理完", filteredData);
+  store.setRouteTree(filteredData);
+  // 根据树生成一维路由数组
+  const flattenedArray = linearArray(filteredData);
+  // 设置完整的路由，二维路由，顶层路由 + 二级的一维路由
+  const twoStoryTree = dynamicRoutes.map(item => {
+    if (flattenedArray.length > 0) item.redirect = flattenedArray[0].path;
+    item.children = flattenedArray;
+    return item;
+  });
+  // 动态添加路由
+  twoStoryTree.forEach((route: any) => router.addRoute(route));
+  // 根据一维路由设置缓存name
+  setCacheName(flattenedArray);
+  const { routeTree, routeNames } = storeToRefs(store);
+  console.log("一维数组", routeTree.value, routeNames.value); // 缓存需要修改，路由树这里没有数据
+}
+
+// 设置缓存name
+export function setCacheName(flattenedArray: any) {
+  const store = useRoutesListStore(pinia);
+  const cacheName = flattenedArray.map((item: any) => item.name);
+  store.setrouteNames(cacheName);
+}
+
+// 路由转一维数组
+export function linearArray(tree: any) {
+  const result = [];
+  while (tree.length) {
+    const next = tree.pop();
+    if (Array.isArray(next.children)) {
+      tree.push(...next.children);
+    }
+    result.push(next);
+  }
+  return result.reverse();
 }
 
 // 过滤路由树，返回有权限的树

src/store/route-list.ts

@@ -7,15 +7,22 @@ import { defineStore } from "pinia";
  */
 export const useRoutesListStore = defineStore("routeList", {
   state: (): any => ({
+    routeTree: [], // 路由树
     routeList: [], // 路由数据
     routeNames: [] // 路由名称
   }),
   actions: {
+    async setRouteTree(data: any) {
+      this.routeTree = data;
+    },
     async setRouteList(data: Array<string>) {
       this.routesList = data;
     },
     async setrouteNames(data: Array<string>) {
       this.routeNames = data;
     }
+  },
+  persist: {
+    enabled: true
   }
 });

src/store/user-info.ts

@@ -6,7 +6,7 @@ import { defineStore } from "pinia";
  * @methods setToken 设置token
  * @methods logOut 退出登录
  */
-export const useUserInfoStore = defineStore("routeList", {
+export const useUserInfoStore = defineStore("userInfo", {
   state: (): any => ({
     account: {
       username: "",