完成第九章学习

src/apis/personal.js

@@ -7,3 +7,11 @@ export const userInfo = (data) => {
         data,
     })
 }
+
+export const menuTree = (data) => {
+    return request({
+        url: '/personal/menuTree',
+        method: 'get',
+        data,
+    })
+}

src/layout/components/PageFrame.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: "PageFrame"
+}
+</script>
+
+<style scoped>
+
+</style>

src/layout/components/PageSiderbar.vue

@@ -33,12 +33,15 @@ import {useRoute} from "vue-router";
 import {useI18n} from "vue-i18n";
 import {ref, computed} from "vue";
 import {Expand, Fold} from "@element-plus/icons-vue";
+import {useStore} from "vuex";
+
 
 
 const route = useRoute();
 const {t} = useI18n();
+const store = useStore();
 
-const treeData = menuTreeData;
+const treeData = computed(() => store.state.menuTree);
 const defaultActive = computed(() => route.path || treeData.value[0].path);
 
 const isCollapse = ref(false)

src/router/index.js

@@ -1,5 +1,8 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
 import Layout from '@/layout/index.vue'
+import pageFrame from "@/layout/components/PageFrame.vue";
+import store from "@/store/index.js";
+import {menuTree} from "@/apis/personal.js";
 
 const routes = [
     {
@@ -53,18 +56,110 @@ const routes = [
 ];
 
 const route404 = {
-    path:" /:pathMatch(.*)*",
+    path: "/:pathMatch(.*)*",
     name: "404",
     redirect: "/404"
 }
 const router = createRouter({history: createWebHashHistory(), routes})
 
-router.beforeEach((to) => {
+// router.beforeEach((to) => {
-    const token = localStorage.getItem("pm_token");
+//     const token = localStorage.getItem("pm_token");
-    if (to.meta.requireAuth && !token) {
+//     if (to.meta.requireAuth && !token) {
-        return {name: 'Login'}
+//         return {name: 'Login'}
+//     }
+//     return true;
+// });
+
+router.beforeEach(async (to) => {
+    const isLogin = store.getters['user/isLogin'];
+
+    if (to.path === '/login') {
+        if (isLogin) {
+            return {name: "Home"};
+        }
+        return true
+    }
+    if (to.meta.requireAuth) {
+        if (!isLogin) {
+            return {name: "Login"};
+        }
+    }
+    await addDynamic();
+
+    if (!to.name && hasRoute(to)) {
+        return {...to};
+    }
+    if (to.path === "/" && store.state.firstRoute) {
+        return store.state.firstRoute;
+    }
+    return true
+})
+
+
+function hasRoute(to) {
+    const item = router.getRoutes().find((item) => item.path === to.path);
+    return !!item
+}
+
+function addDynamic() {
+    if (store.state.routeLoaded) {
+        return;
+    }
+    return menuTree().then((res) => {
+        if (res.data && res.data.length) {
+            addDynamicRoutes(res.data)
         }
-    return true;
+        router.addRoute(route404);
-});
+        store.commit("setRouteLoaded", true);
+        store.commit("setMenuTree", res.data);
+    })
+}
+// 动态引入views下的所有.vue文件（组件）
+const modules = import.meta.glob('../views/**/*.vue');
+console.log(modules)
+
+function addDynamicRoutes(data, parent) {
+    data.forEach(
+        (item, i) => {
+            console.log(item);
+            const route = {
+                path: item.path,
+                name: item.name,
+                meta: {
+                    title: item.title,
+                    icon: item.icon,
+                },
+                children: []
+            };
+            if (parent) {
+                if (item.parentId !== 0) {
+                    const compParr = item.path.replace("/", "").split("/");
+                    const l = compParr.length - 1;
+                    const compPath = compParr
+                        .map((v, i) => {
+                        return i === l ? v.replace(/\w/, (L) => L.toUpperCase()) + ".vue" : v;
+                    }).join("/");
+                    console.log(compParr);
+                    console.log(l);
+                    console.log(compPath);
+
+                    route.path = compParr[l];
+                    route.component = modules[`../views/${compPath}`];
+                    parent.children.push(route);
+                }
+            } else {
+                if (item.children && item.children.length) {
+                    route.redirect = item.children[0].path;
+                    addDynamicRoutes(item.children, route)
+                }
+                route.component = pageFrame;
+                if (i === 0) {
+                    store.commit("setFirstRoute", route);
+                }
+                router.addRoute("Home", route);
+            }
+        }
+    )
+}
 
 export default router