feat: 过滤路由树

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "dc-admin": "link:",
     "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/main.ts

@@ -3,6 +3,7 @@ import "@/style.css";
 import App from "@/App.vue";
 import ArcoVue from "@arco-design/web-vue";
 import router from "@/router/index";
+import pinia from "@/store/index";
 import "virtual:svg-icons-register";
 import "@arco-design/web-vue/dist/arco.css";
 
@@ -11,5 +12,6 @@ app.use(ArcoVue, {
   // 用于改变使用组件时的前缀名称
   componentPrefix: "arco"
 });
+app.use(pinia);
 app.use(router);
 app.mount("#app");

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
+import { initSetRouter } from "@/router/route-output";
 import NProgress from "@/config/nprogress";
 
 /**
@@ -29,6 +30,7 @@ router.beforeEach(async (to, from, next) => {
   } else if (to.path === "/login" && sessionStorage.getItem("token")) {
     next("/home");
   } else {
+    initSetRouter();
     next();
   }
   // if (to.path === "/login" && !sessionStorage.getItem("token")) {

src/router/route-output.ts

@@ -1,3 +1,24 @@
+import { dynamicRoutes } from "@/router/route";
 export function initSetRouter() {
   console.log("路由数据处理");
+  // 过滤后的结果
+  let filteredData = filterByRole(dynamicRoutes[0].children);
+  console.log("路由处理完", filteredData);
 }
+
+// 过滤路由树，返回有权限的树
+export const filterByRole = (nodes: any) => {
+  return nodes.filter((item: any) => {
+    if (item.meta && item.meta.roles) {
+      if (!roleBase(item.meta.roles)) return false;
+    }
+    if (item.children) item.children = filterByRole(item.children);
+    return true;
+  });
+};
+
+// 校验角色权限
+export const roleBase = (roles: Array<string>) => {
+  let userRoles = ["admin"];
+  return userRoles.some(el => roles.includes(el));
+};

src/router/route.ts

@@ -36,7 +36,7 @@ export const dynamicRoutes = [
         path: "/home",
         name: "home",
         component: () => import("@/views/home/home.vue"),
-        meat: {
+        meta: {
           title: "home", // 国际化
           isHide: false, // 是否隐藏此路由
           isKeepAlive: true, // 缓存组件状态
@@ -47,6 +47,21 @@ export const dynamicRoutes = [
           icon: "home" // 菜单图标
         }
       },
+      {
+        path: "/home2",
+        name: "home2",
+        component: () => import("@/views/home/home.vue"),
+        meta: {
+          title: "home2", // 国际化
+          isHide: false, // 是否隐藏此路由
+          isKeepAlive: true, // 缓存组件状态
+          isAffix: true, // 固定在tagesView栏上
+          isLink: "", // 是否外链
+          isIframe: false, // 是否内嵌窗口
+          roles: ["common"], // 路由权限
+          icon: "home" // 菜单图标
+        }
+      },
       {
         path: "/common-components",
         name: "common-components",

src/store/index.ts

@@ -0,0 +1,9 @@
+// https://pinia.vuejs.org/zh/
+// store/index.js
+import { createPinia } from "pinia";
+
+// 创建
+const pinia = createPinia();
+
+// 导出
+export default pinia;

src/store/route-list.ts

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+/**
+ * 路由列表
+ * @methods setRoutesList 设置路由数据
+ * @methods setrouteNames 设置路由名称
+ */
+export const useRoutesListStore = defineStore("routeList", {
+  state: (): any => ({
+    routeList: [], // 路由数据
+    routeNames: [] // 路由名称
+  }),
+  actions: {
+    async setRouteList(data: Array<string>) {
+      this.routesList = data;
+    },
+    async setrouteNames(data: Array<string>) {
+      this.routeNames = data;
+    }
+  }
+});