提交代码

fhKeeper/formulahousekeeper/customerBuler-crm/package-lock.json

@@ -14,6 +14,7 @@
         "echarts": "^5.5.0",
         "element-plus": "^2.5.6",
         "pinia": "^2.1.7",
+        "pinia-plugin-persistedstate": "^3.2.1",
         "vue": "^3.4.19",
         "vue-router": "^4.3.0"
       },
@@ -2180,6 +2181,14 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",

fhKeeper/formulahousekeeper/customerBuler-crm/package.json

@@ -16,6 +16,7 @@
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0"
   },

fhKeeper/formulahousekeeper/customerBuler-crm/src/App.vue

@@ -2,12 +2,18 @@
   <router-view></router-view>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+window.addEventListener('beforeunload', e => beforeunloadFn(e))
+const beforeunloadFn = ((e:any) => {
+  console.log(e)
+})
+</script>
 
 <style>
 html,
 body,
-#app, .layouts {
+#app,
+.layouts {
   width: 100%;
   height: 100%;
   overflow: hidden;

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -7,11 +7,11 @@
       <h2 class="text-xl text-center pt-4 font-bold">客户管家</h2>
       <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm" :rules="rules">
         <el-form-item prop="username">
-          <el-input :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username" autocomplete="off"
+          <el-input clearable :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username" autocomplete="off"
             placeholder="账号/手机号" />
         </el-form-item>
         <el-form-item prop="password">
-          <el-input :prefix-icon="Lock" show-password size="large" class="mt-4" v-model="ruleForm.password"
+          <el-input clearable :prefix-icon="Lock" show-password size="large" class="mt-4" v-model="ruleForm.password"
             autocomplete="off" placeholder="密码" />
         </el-form-item>
         <div class="pt-4">
@@ -46,6 +46,8 @@ import loginLogo from "@/assets/login/login_logo.png";
 import qiyeweixin from "@/assets/login/qiyeweixin.png";
 import { UserFilled, Lock } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
+import { useStore } from '@/store/index'
+const { setRouters } = useStore()
 const router = useRouter();
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = ref({
@@ -69,9 +71,16 @@ const login = (formEl: FormInstance | undefined) => {
     }
     loginLoading.value = true;
     console.log(ruleForm.value);
+    let newRouter = [
+      { 
+        path: '/thread',
+        name: 'thread'
+      }
+    ]
+    setRouters(newRouter)
     setTimeout(() => {
       loginLoading.value = false;
-      router.push("/home");
+      router.push(newRouter[0].path);
     }, 1000);
   })
 

fhKeeper/formulahousekeeper/customerBuler-crm/src/router/index.ts

@@ -1,48 +1,81 @@
-import { createRouter, createWebHistory, } from 'vue-router'
-import Login from '../pages/login.vue';
+import { RouteRecordRaw,createRouter, createWebHistory } from "vue-router";
+import { useStore } from "@/store/index";
+export const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: "/login",
+  },
+  {
+    name: "login",
+    path: "/login",
+    component: () => import("../pages/login.vue"),
+  },
+  {
+    name: "register",
+    path: "/register",
+    component: () => import("../pages/register.vue"),
+  },
+  {
+    name: "home",
+    path: "/home",
+    component: () => import("../pages/home.vue"),
+    children: [
+      // {
+      //     name: 'thread',
+      //     path: '/thread',
+      //     component: () => import("../pages/thread/thread.vue")
+      // },
+    ],
+  },
+  {
+    name: "test",
+    path: "/test",
+    component: () => import("../pages/test/index.vue"),
+  },
+  {
+    name: "testEcharts",
+    path: "/testEcharts",
+    component: () => import("../pages/test/echarts.vue"),
+  },
+];
 
-export const routes = [
-    {
-        path: '/',
-        redirect: '/login'
-    },
-    {
-        name: 'login',
-        path: '/login',
-        component: Login
-    },
-    {
-        name: 'register',
-        path: '/register',
-        component: () => import("../pages/register.vue")
-    },
-    {
-        name: 'home',
-        path: '/home',
-        component: () => import("../pages/home.vue"),
-        children: [
-            {
-                name: 'thread',
-                path: '/thread',
-                component: () => import("../pages/thread/thread.vue")
-            },
-        ]
-    }, {
-        name: "test",
-        path: "/test",
-        component: () => import("../pages/test/index.vue")
-    }, {
-        name: "testEcharts",
-        path: "/testEcharts",
-        component: () => import("../pages/test/echarts.vue")
-    }
-]
 const router = createRouter({
-    scrollBehavior: () => ({ left: 0, top: 0 }),
-    history: createWebHistory(),
-    routes,
-})
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+  history: createWebHistory(),
+  routes,
+});
 router.beforeEach((_to, _from, next) => {
-    next()
-})
-export default router
+  const routerList = useStore().routers;
+  const routers = router.getRoutes();
+  console.log(routerList, routers);
+  const { setAsyncRoutesMark, asyncRoutesMark } = useStore();
+  const token = true;
+  if (_to.path == "/login") {
+    next();
+  } else {
+    if (token && routerList && routerList.length > 0) {
+      if (asyncRoutesMark) {
+        next();
+      } else {
+        setAsyncRoutesMark(true)
+        const newRouters: any = routers
+        const addNewRouter = newRouters.find((item: any) => item.name == 'home')
+        routerList.forEach((item: any) => {
+          addNewRouter?.children.push({
+            path: item.path,
+            name: item.name,
+            meta: {},
+            component: () => import(`@/pages/${item.name}/index.vue`),
+          })
+        })
+        router.addRoute(addNewRouter);
+        next({ ..._to, replace: true });
+      }
+    } else {
+      console.log("无登录信息，跳转到登录页");
+      next(`/login`);
+    }
+  }
+  console.log(routerList);
+});
+export default router;

fhKeeper/formulahousekeeper/customerBuler-crm/src/store/index.ts

@@ -1,15 +1,20 @@
 import { defineStore, acceptHMRUpdate } from "pinia";
 export const useStore = defineStore({
     id: "index",
-    state: () => ({name: "old name",}),
-    getters: {
-        myName: (state) => {
-            return `getters ${state.name}`
-        }
+    state: () => ({
+        userInfo: {}, // 当前的用户信息
+        routers: [], // 返回的所有路由
+        asyncRoutesMark: false
+    }),
+    getters: { // 取值
+        
     },
-    actions: {
-        changeName(name: string) {
-            this.name = name
+    actions: { // 方法
+        setRouters(arr: any) {
+            this.routers = arr;
+        },
+        setAsyncRoutesMark(val: boolean) {
+            this.asyncRoutesMark = val
         }
     },
 });