🐛 权限路由默认子路由控制

src/helper/permission.ts

@@ -14,8 +14,10 @@ export const filterRoutesByRoles = (
   routes.forEach((route) => {
     const temp = { ...route };
     if (checkRoutePermission(roles, temp)) {
-      if (temp.children)
+      if (temp.children) {
         temp.children = filterRoutesByRoles(temp.children, roles);
+        temp.redirect = path.resolve(temp.path, temp.children[0].path);
+      }
       result.push(temp);
     }
   });

src/plugins/install.ts

@@ -1,5 +1,14 @@
 import { App } from "vue";
-import { Button, ConfigProvider, Layout, Menu, Modal } from "ant-design-vue";
+import {
+  Button,
+  ConfigProvider,
+  Form,
+  Input,
+  Layout,
+  Menu,
+  Modal,
+  notification,
+} from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
 import VueConfirmDirective from "./vue-confirm";
@@ -16,6 +25,8 @@ const install = (app: App<Element>) => {
     .use(ConfigProvider)
     .use(Layout)
     .use(Menu)
+    .use(Form)
+    .use(Input)
     .use(Button);
 };
 

src/plugins/vue-confirm.ts

@@ -28,7 +28,7 @@ const unbind = (el: HTMLElement, binding: DirectiveBinding) => {
 const VueConfirmDirective = {
   install: (app: App<Element>) => {
     app.directive("confirm", {
-      beforeMount: bind,
+      mounted: bind,
       unmounted: unbind,
     });
   },

src/router/async.ts

@@ -1,77 +1,60 @@
 import { RouteConfig } from "@/types/route";
 
-export const Page1: RouteConfig = {
-  name: "Page1",
-  path: "/page1",
+export const AccountManager: RouteConfig = {
+  name: "AccountManager",
+  path: "/account-manager",
   meta: {
-    title: "Page 1",
+    title: "公众号管理",
   },
-  component: () => import("@/views/Page1.vue"),
+  component: () => import("@/views/account/account.vue"),
 };
 
-export const Page2: RouteConfig = {
-  name: "Page2",
-  path: "/page2",
+const PutBook = {
+  name: "PutBook",
+  path: "book",
   meta: {
-    title: "Page 2",
+    title: "投放书籍",
   },
-  children: [
-    {
-      name: "Page3",
-      path: "page3",
-      meta: {
-        title: "Page 3",
-      },
-      children: [
-        {
-          name: "Page5",
-          path: "page5",
-          meta: {
-            title: "Page 5",
-          },
-          component: () => import("@/views/Page5.vue"),
-        },
-        {
-          name: "Page6",
-          path: "page6",
-          meta: {
-            title: "Page 6",
-          },
-          component: () => import("@/views/Page6.vue"),
-        },
-      ],
-      component: () => import("@/views/Page3.vue"),
-    },
-    {
-      name: "Page4",
-      path: "page4",
-      meta: {
-        title: "Page 4",
-      },
-      component: () => import("@/views/Page4.vue"),
-    },
-  ],
-  component: () => import("@/views/Page2.vue"),
+  component: () => import("@/views/put/put-book.vue"),
 };
 
-export const Page3: RouteConfig = {
-  name: "Page3",
-  path: "/page3",
+const PutAdAccount = {
+  name: "PutAdAccount",
+  path: "ad-account",
   meta: {
-    title: "Page 3",
+    title: "广告账号",
   },
-  component: () => import("@/views/Page3.vue"),
+  component: () => import("@/views/put/put-ad-account.vue"),
 };
 
-export const Page4: RouteConfig = {
-  name: "Page4",
-  path: "/page4",
+const PutAdPlan = {
+  name: "PutAdPlan",
+  path: "ad-plan",
   meta: {
-    title: "Page 4",
+    title: "广告计划",
   },
-  component: () => import("@/views/Page4.vue"),
+  component: () => import("@/views/put/put-ad-plan.vue"),
 };
 
-const asyncRoutes: RouteConfig[] = [Page1, Page2];
+const PutData = {
+  name: "PutData",
+  path: "data",
+  meta: {
+    title: "投放数据",
+  },
+  component: () => import("@/views/put/put-data.vue"),
+};
+
+export const PutManager: RouteConfig = {
+  name: "PutManager",
+  path: "/put-manager",
+  meta: {
+    title: "投放管理",
+  },
+  children: [PutBook, PutAdAccount, PutAdPlan, PutData],
+  component: () => import("@/views/put/index.vue"),
+};
+
+const asyncRoutes: RouteConfig[] = [AccountManager, PutManager];
 
 export default asyncRoutes;

src/router/permission.ts

@@ -35,28 +35,26 @@ router.beforeEach(
     _: RouteLocationNormalized,
     next: NavigationGuardNext
   ) => {
-    if (to.path === "/login") next({ path: "/", replace: true });
+    // if (to.path === "/login") next({ path: "/", replace: true });
+    // else {
+    // }
+    const roles = store.state.app.roles;
+    if (roles.length) next();
     else {
-      const roles = store.state.app.roles;
-      if (roles.length) next();
-      else {
-        const userRoles: string[] = await store.dispatch(
-          ActionType.getUserRoles
-        );
-        const webRoutes: RouteConfig[] = await store.dispatch(
-          ActionType.generatorRoutes,
-          userRoles
-        );
-        const AppRoute: RouteConfig = {
-          name: "home",
-          path: "",
-          redirect: webRoutes[0].path,
-          component: Layout,
-          children: webRoutes,
-        };
-        router.addRoute(AppRoute);
-        next({ ...to, replace: true, name: to.name! });
-      }
+      const userRoles: string[] = await store.dispatch(ActionType.getUserRoles);
+      const webRoutes: RouteConfig[] = await store.dispatch(
+        ActionType.generatorRoutes,
+        userRoles
+      );
+      const AppRoute: RouteConfig = {
+        name: "home",
+        path: "",
+        redirect: webRoutes[0].path,
+        component: Layout,
+        children: webRoutes,
+      };
+      router.addRoute(AppRoute);
+      next({ ...to, replace: true, name: to.name! });
     }
     //  redirectRoutes(to, next);
   }

src/store/modules/app/actions.ts

@@ -7,9 +7,10 @@ import { filterRoutesByRoles } from "@/helper/permission";
 const actions: ActionTree<State, RootState> & Actions = {
   [ActionType.generatorRoutes]({ commit }, roles) {
     return new Promise(async (resolve) => {
-      let resultRoutes;
-      if (roles.includes("admin")) resultRoutes = asyncRoutes || [];
-      else resultRoutes = filterRoutesByRoles(asyncRoutes, roles) || [];
+      let resultRoutes = filterRoutesByRoles(asyncRoutes, roles) || [];
+      // if (roles.includes("admin"))
+      //   resultRoutes = filterRoutesByRoles(asyncRoutes, roles) || [];
+      // else resultRoutes = filterRoutesByRoles(asyncRoutes, roles) || [];
       await commit(MutationType.setRoutes, resultRoutes);
       resolve(resultRoutes);
     });