feat: 🎸 权限管理开发中

babel.config.js

@@ -14,10 +14,5 @@ module.exports = {
         'styleLibraryName': 'theme-chalk'
       }
     ]
-  ],
+  ]
-  'env': {
-    'development': {
-      'plugins': ['dynamic-import-node']
-    }
-  }
 }

mock/role/test-role.ts

@@ -1,4 +1,5 @@
-export const checkedRoleNodes = [{
+export const checkedRoleNodes = [
+  {
     path: '/components-demo',
     component: '#',
     redirect: '/components-demo/echarts',
@@ -8,7 +9,8 @@ export const checkedRoleNodes = [{
       icon: 'component',
       alwaysShow: true
     },
-    children: [{
+    children: [
+      {
         path: 'echarts',
         component: 'pages/index/views/components-demo/echarts/index.vue',
         name: 'EchartsDemo',
@@ -281,14 +283,16 @@ export const checkedRoleNodes = [{
       icon: 'clipboard',
       alwaysShow: true
     },
-    children: [{
+    children: [
-      path: 'clipboard',
+      {
-      component: 'pages/index/views/directives-demo/clipboard/index.vue',
+        path: 'clipboard',
-      name: 'ClipboardDemo',
+        component: 'pages/index/views/directives-demo/clipboard/index.vue',
-      meta: {
+        name: 'ClipboardDemo',
-        title: 'Clipboard'
+        meta: {
+          title: 'Clipboard'
+        }
       }
-    }]
+    ]
   },
   {
     path: '/hooks-demo',
@@ -300,7 +304,8 @@ export const checkedRoleNodes = [{
       icon: 'international',
       alwaysShow: true
     },
-    children: [{
+    children: [
+      {
         path: 'watermark',
         component: 'pages/index/views/hooks-demo/useWatermark/index.vue',
         name: 'UseWatermarkDemo',
@@ -326,15 +331,17 @@ export const checkedRoleNodes = [{
       title: '图标',
       icon: 'icon'
     },
-    children: [{
+    children: [
-      path: 'index',
+      {
-      component: 'pages/index/views/icons/index.vue',
+        path: 'index',
-      name: 'Icons',
+        component: 'pages/index/views/icons/index.vue',
-      meta: {
+        name: 'Icons',
-        title: '图标',
+        meta: {
-        icon: 'icon'
+          title: '图标',
+          icon: 'icon'
+        }
       }
-    }]
+    ]
   },
   {
     path: '/level',
@@ -345,7 +352,8 @@ export const checkedRoleNodes = [{
       title: '多级菜单缓存',
       icon: 'nested'
     },
-    children: [{
+    children: [
+      {
         path: 'menu1',
         name: 'Menu1Demo',
         component: '##Menu1Demo',
@@ -353,7 +361,8 @@ export const checkedRoleNodes = [{
         meta: {
           title: 'Menu1'
         },
-        children: [{
+        children: [
+          {
             path: 'menu1-1',
             name: 'Menu11Demo',
             component: '##Menu11Demo',
@@ -362,14 +371,16 @@ export const checkedRoleNodes = [{
               title: 'Menu1-1',
               alwaysShow: true
             },
-            children: [{
+            children: [
-              path: 'menu1-1-1',
+              {
-              name: 'Menu111Demo',
+                path: 'menu1-1-1',
-              component: 'pages/index/views/level/Menu111.vue',
+                name: 'Menu111Demo',
-              meta: {
+                component: 'pages/index/views/level/Menu111.vue',
-                title: 'Menu1-1-1'
+                meta: {
+                  title: 'Menu1-1-1'
+                }
               }
-            }]
+            ]
           },
           {
             path: 'menu1-2',
@@ -401,7 +412,8 @@ export const checkedRoleNodes = [{
       icon: 'example',
       title: '综合实例'
     },
-    children: [{
+    children: [
+      {
         path: 'example-dialog',
         component: 'pages/index/views/example-demo/example-dialog/index.vue',
         name: 'ExampleDialog',
@@ -468,7 +480,8 @@ export const checkedRoleNodes = [{
       icon: 'user',
       alwaysShow: true
     },
-    children: [{
+    children: [
+      {
         path: 'user',
         component: 'pages/index/views/role-demo/user/index.vue',
         name: 'User',

package.json

@@ -58,6 +58,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-import": "^1.13.1",
     "body-parser": "^1.19.0",
     "chalk": "^4.1.0",

src/pages/index/permission.ts

@@ -18,6 +18,7 @@ import type { RouteRecordRaw } from 'vue-router'
 
 const whiteList: string[] = ['/login'] // 不重定向白名单
 router.beforeEach((to, from, next) => {
+  NProgress.start()
   if (wsCache.get(appStore.userInfo)) {
     if (to.path === '/login') {
       next({ path: '/' })

src/pages/index/store/modules/permission.ts

@@ -1,4 +1,3 @@
-// import path from 'path'
 import { asyncRouterMap, constantRouterMap } from '_p/index/router'
 import { deepClone } from '@/utils'
 import store from '../index'
@@ -128,16 +127,14 @@ function getFilterRoutes(routes: any[]): any[] {
       name: route.name,
       redirect: route.redirect
     }
-    data.meta = Object.assign({}, route.meta || {}, { title: route.title })
+    data.meta = Object.assign({}, route.meta || {}, { title: route.title || route.meta.title })
     if (route.component) {
       // 动态加载路由文件，可根据实际情况进行自定义逻辑
       data.component = route.component === '#'
         ? Layout
         : (route.component.includes('##')
           ? getParentLayout(route.component.split('##')[1])
-          : () => new Promise((resolve) => {
+          : () => import(`@/${route.component}`))
-            resolve(import(`${route.component}`))
-          }))
     }
     // recursive child routes
     if (route.children) {

src/pages/index/views/role-demo/role/components/InfoWrite2.vue

@@ -81,8 +81,6 @@
 <script lang="ts">
 import { setRoleApi, getRoleDetApi } from '../api'
 import { defineComponent, PropType, ref, reactive, nextTick, unref } from 'vue'
-import { AppRouteRecordRaw } from '_p/index/router/types'
-import { isExternal } from '@/utils/validate'
 import { Message } from '_c/Message'
 
 const requiredRule = {