Vue menu permission

packages/toolkits/pro/template/tinyvue/src/api/interceptor.ts

@@ -24,17 +24,7 @@ axios.interceptors.request.use(
       config.headers.Authorization = `Bearer ${token}`;
     }
 
-    const regex = /[;\s+]?csrfToken=([^;]*)/;
-    if (!document.cookie.match(regex)) {
-      try {
-        await fetch('/api/v1/setcsrf');
-      } catch (e) {
-        throw e;
-      }
-    }
-    const [, csrfToken] = regex.exec(document.cookie) || [];
-
-    config.headers = { ...config.headers, 'x-csrf-token': csrfToken };
+    config.headers = { ...config.headers };
 
     return config;
   },

packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue

@@ -10,12 +10,12 @@
       @current-change="currentChange"
     >
       <template #default="slotScope">
-        <template v-for="(item, index) in routerTitle" :key="index">
-          <span v-if="slotScope.label === item.value" class="menu-title">
-            <component :is="item.icon"></component>&nbsp;
-            <span :class="item.bold">{{ $t(item.name) }}</span>
+        <div class="menu-title">
+          <component :is="getMenuIcon(slotScope.data.id)"></component>
+          <span :class="slotScope.data.children ? 'main-title' : 'title'">
+            {{ $t(slotScope.data.meta.locale) }}
           </span>
-        </template>
+        </div>
       </template>
     </tiny-tree-menu>
   </div>
@@ -32,189 +32,78 @@
     IconCueL,
     IconUser,
     IconFiletext,
-    IconDesktopView,
+    IconDesktopView
   } from '@opentiny/vue-icon';
   import router from '@/router';
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import { useUserStore } from '@/store';
 
-  // icon图标
-  const iconDownloadCloud = IconDownloadCloud();
-  const iconFiles = IconFiles();
-  const iconSetting = IconSetting();
-  const iconSuccessful = IconSuccessful();
-  const iconCueL = IconCueL();
-  const iconUser = IconUser();
-  const iconFiletext = IconFiletext();
-  const iconDesktopView = IconDesktopView();
   const tree = ref();
   const expandeArr = ref();
-  const routerTitle = [
-    {
-      value: 'Board',
-      name: 'menu.board',
-      icon: iconDesktopView,
-      bold: 'main-title',
-    },
-    {
-      value: 'Home',
-      name: 'menu.home',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Work',
-      name: 'menu.work',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'List',
-      name: 'menu.list',
-      icon: iconFiles,
-      bold: 'main-title',
-    },
-    {
-      value: 'Table',
-      name: 'menu.list.searchTable',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Form',
-      name: 'menu.form',
-      icon: iconSetting,
-      bold: 'main-title',
-    },
-    {
-      value: 'Base',
-      name: 'menu.form.base',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Step',
-      name: 'menu.form.step',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Profile',
-      name: 'menu.profile',
-      icon: iconFiletext,
-      bold: 'main-title',
-    },
-    {
-      value: 'Detail',
-      name: 'menu.profile.detail',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Result',
-      name: 'menu.result',
-      icon: iconSuccessful,
-      bold: 'main-title',
-    },
-    {
-      value: 'Success',
-      name: 'menu.result.success',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Error',
-      name: 'menu.result.error',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Cloud',
-      name: 'menu.cloud',
-      icon: iconDownloadCloud,
-      bold: 'main-title',
-    },
-    {
-      value: 'Hello',
-      name: 'menu.cloud.hello',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Contracts',
-      name: 'menu.cloud.contracts',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Exception',
-      name: 'menu.exception',
-      icon: iconCueL,
-      bold: 'main-title',
-    },
-    {
-      value: '403',
-      name: 'menu.exception.403',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: '404',
-      name: 'menu.exception.404',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: '500',
-      name: 'menu.exception.500',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'User',
-      name: 'menu.user',
-      icon: iconUser,
-      bold: 'main-title',
-    },
-    {
-      value: 'Info',
-      name: 'menu.user.info',
-      icon: null,
-      bold: 'title',
-    },
-    {
-      value: 'Setting',
-      name: 'menu.user.setting',
-      icon: null,
-      bold: 'title',
-    },
-  ];
+  const treeData = ref({});
 
   // 获取路由数据
   const appRoute = computed(() => {
     return router
       .getRoutes()
-      .find((el) => el.name === 'root') as RouteRecordNormalized;
+      .find((el: any) => el.name === 'root') as RouteRecordNormalized;
   });
   const copyRouter = JSON.parse(JSON.stringify(appRoute.value.children));
   copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
     return (a.meta.order || 0) - (b.meta.order || 0);
   });
-
   const userStore = useUserStore();
   const role = computed(() => userStore.role);
-  let treeData = ref(copyRouter);
-
+  const getMenuIcon = (id: string) => {
+    switch (id) {
+      case 'Cloud': {
+        return IconDownloadCloud();
+      }
+      case 'List': {
+        return IconFiles();
+      }
+      case 'Board': {
+        return IconDesktopView();
+      }
+      case 'Form': {
+        return IconSetting();
+      }
+      case 'Result': {
+        return IconSuccessful();
+      }
+      case 'Exception': {
+        return IconCueL();
+      }
+      case 'Profile': {
+        return IconFiletext();
+      }
+      case 'User': {
+        return IconUser();
+      }
+      default: {
+        return false;
+      }
+    }
+  };
+  const filterRoutes = (routes: any, roles: any) => {
+    return routes
+      .filter((route: any) => {
+        if (route.meta && route.meta.roles) {
+          return roles.some((r: any) => route.meta.roles.includes(r));
+        }
+        return true;
+      })
+      .map((route: any) => {
+        if (route.children) {
+          route.children = filterRoutes(route.children, roles);
+        }
+        return route;
+      });
+  };
   watch(
     role,
-    (newValue, oldValue) => {
-      if (newValue === 'admin') {
-        treeData.value = copyRouter;
-      } else {
-        treeData.value = copyRouter.filter(
-          (item: { name: string }) => item.name !== 'User'
-        );
-      }
+    (value: any) => {
+      treeData.value = filterRoutes(copyRouter, [value]);
     },
     { immediate: true }
   );
@@ -224,7 +113,7 @@
    */
   watch(
     () => router.currentRoute.value.path,
-    (newValue) => {
+    (newValue: any) => {
       let data = newValue.split('/');
       let result = data[data.length - 1];
       const characters = [...result];
@@ -246,7 +135,7 @@
       'Profile',
       'Result',
       'User',
-      'Cloud',
+      'Cloud'
     ];
     if (filter.indexOf(data.id) === -1) {
       router.push({ name: data.id });
@@ -262,6 +151,9 @@
     font-size: 14px;
     line-height: 20px;
     text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
   }
 
   .title {
@@ -275,5 +167,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 20px;
+    > span {
+      padding-left: 10px;
+    }
+    > svg {
+      width: 1.3em;
+      height: 1.3em;
+    }
+  }
+  .tiny-tree-menu
+    .tiny-tree
+    .tiny-tree-node.is-current
+    > .tiny-tree-node__content
+    .tree-node-name
+    .tiny-svg {
+    fill: var(--ti-tree-menu-square-left-border-color);
   }
 </style>

packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts

@@ -28,8 +28,8 @@ import localeSettings from './en-US/settings';
 
 export default {
   'menu.board': 'Dashboard Page',
-  'menu.home': 'Monitoring page',
-  'menu.work': 'workbench',
+  'menu.board.home': 'Monitoring page',
+  'menu.board.work': 'workbench',
   'menu.list': 'List',
   'menu.result': 'Result',
   'menu.exception': 'Exception',

packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts

@@ -28,8 +28,8 @@ import localeSettings from './zh-CN/settings';
 
 export default {
   'menu.board': '看板',
-  'menu.home': '监控页',
-  'menu.work': '工作台',
+  'menu.board.home': '监控页',
+  'menu.board.work': '工作台',
   'menu.list': '列表页',
   'menu.result': '结果页',
   'menu.exception': '异常页',

packages/toolkits/pro/template/tinyvue/src/router/routes/modules/cloud.ts

@@ -1,3 +1,5 @@
+import { RoleType } from '@/types/roleType';
+
 export default {
   path: 'cloud',
   name: 'Cloud',
@@ -8,6 +10,7 @@ export default {
     locale: 'menu.cloud',
     requiresAuth: true,
     order: 8,
+    roles: [RoleType.admin, RoleType.user],
   },
   children: [
     {
@@ -19,7 +22,7 @@ export default {
       meta: {
         locale: 'menu.cloud.hello',
         requiresAuth: true,
-        roles: ['admin'],
+        roles: [RoleType.admin],
       },
     },
     {
@@ -31,7 +34,7 @@ export default {
       meta: {
         locale: 'menu.cloud.contracts',
         requiresAuth: true,
-        roles: ['*'],
+        roles: [RoleType.admin, RoleType.user],
       },
     },
   ],