add menus

Author: xlorne

antd-pro/config/routes.ts

@@ -29,12 +29,13 @@ export default [
     name: 'welcome',
     icon: 'smile',
     component: './Welcome',
+    access: 'hasAuthentication',
   },
   {
     path: '/admin',
     name: 'admin',
     icon: 'crown',
-    access: 'isAdmin',
+    access: 'hasAuthentication',
     routes: [
       {
         path: '/admin',
@@ -52,36 +53,43 @@ export default [
     icon: 'table',
     path: '/list',
     component: './table',
+    access: 'hasAuthentication',
   },
   {
     name: 'components',
     icon: 'appstore',
     path: '/components',
+    access: 'hasAuthentication',
     routes: [
       {
         name: 'parameter',
         path: '/components/parameter',
         component: './components/parameter',
+        access: 'hasAuthentication',
       },
       {
         name: 'menu',
         path: '/components/menu',
         component: './components/menu',
+        access: 'hasAuthentication',
       },
       {
         path: '/components/api',
         name: 'api',
         component: './components/api',
+        access: 'hasAuthentication',
       },
       {
         path: '/components/oss',
         name: 'oss',
         component: './components/oss',
+        access: 'hasAuthentication',
       },
       {
         path: '/components/oss_test',
         name: 'oss.test',
         component: './components/oss/test',
+        access: 'hasAuthentication',
       },
     ],
   },

antd-pro/src/access.ts

@@ -4,7 +4,23 @@
 export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
   const { currentUser } = initialState ?? {};
   const isAdmin = currentUser && currentUser.authorities?.includes('ROLE_ADMIN');
+  const authentications =  localStorage.getItem('authentications');
   return {
     isAdmin: isAdmin === undefined ? false : isAdmin,
+    hasAuthentication: (element: any) => {
+      console.log('path:',element.path);
+      console.log('authentications:',authentications);
+      if (element.path === '/') {
+        return true;
+      }
+
+      if (authentications === null || authentications === undefined) {
+        return false;
+      }
+      if (authentications.indexOf(element.path) > -1) {
+        return true;
+      }
+      return false;
+    },
   };
 }

antd-pro/src/app.tsx

@@ -2,13 +2,15 @@ import Footer from '@/components/Footer';
 import { Question, SelectLang } from '@/components/RightContent';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { SettingDrawer } from '@ant-design/pro-components';
-import type {  RunTimeLayoutConfig } from '@umijs/max';
+import type { RunTimeLayoutConfig } from '@umijs/max';
 import { history } from '@umijs/max';
 import defaultSettings from '../config/defaultSettings';
 import { errorConfig } from './requestErrorConfig';
 import React from 'react';
 import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
-import { loadLayoutMenus } from './components/Menu';
+import { loadLayoutMenus, loadLoayoutMenuAuthentications } from './components/Menu';
+import { flushSync } from 'react-dom';
+import { menus } from '@/services/api/account'
 const loginPath = '/user/login';
 
 /**
@@ -25,7 +27,7 @@ export async function getInitialState(): Promise<{
       const localUser = {
         avatar: localStorage.getItem('avatar'),
         username: localStorage.getItem('username'),
-        authorities:localStorage.getItem('authorities'),
+        authorities: localStorage.getItem('authorities'),
       };
       return localUser;
     } catch (error) {
@@ -60,10 +62,13 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
         return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
       },
     },
-    menu:{
-        request: async(params, defaultMenuData) =>{
-          return await loadLayoutMenus();
-        }
+    menu: {
+      request: async () => {
+        const response = await menus();
+        const authentications = await loadLoayoutMenuAuthentications(response);
+        localStorage.setItem('authentications', JSON.stringify(authentications));
+        return await loadLayoutMenus(response);
+      }
     },
     waterMarkProps: {
       content: initialState?.currentUser?.username,

antd-pro/src/components/Menu/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { menus } from '@/services/api/account';
 
 interface MenuProps {
   icon: string
@@ -13,24 +12,46 @@ const Menus: React.FC<MenuProps> = (props) => {
   )
 }
 
-export async function loadLayoutMenus() {
-  const response = await menus();
+export async function loadLayoutMenus(response:any) {
   if (response.success) {
     let childrens = response.data.children;
     if (childrens === null) {
       return [];
     }
-    const search = (data: any) => {
+    const fetchMenu = (data: any) => {
       data.icon = <Menus icon={data.icon} />;
       data.children = data.children || [];
       data.children.forEach((item: any) => {
-        search(item);
+        fetchMenu(item);
       });
       return data;
     }
-    childrens = childrens.map(item => search(item));
+    childrens = childrens.map((item:any) => fetchMenu(item));
     return childrens;
   } else {
     return [];
   }
 }
+
+export async function loadLoayoutMenuAuthentications(response:any) {
+  if (response.success) {
+    let childrens = response.data.children;
+    if (childrens === null) {
+      return [];
+    }
+    const authorities: string[] = [];
+    const feathAuthorities = (data: any) => {
+      authorities.push(data.path);
+      if (data.children) {
+        data.children.forEach((item: any) => {
+          feathAuthorities(item);
+        });
+      }
+    }
+    childrens.forEach((element:any) => {
+      feathAuthorities(element);
+    });
+    return authorities;
+  }
+  return [];
+}

antd-pro/src/pages/components/menu/index.tsx

@@ -30,6 +30,12 @@ const MenuPage: React.FC = () => {
     }
   };
 
+  const reloadTree = () => {
+    tree().then(res => {
+      setTreeData([res.data]);
+    })
+  }
+
 
   const handleDel = async (id: string) => {
     const hide = message.loading('正在删除');
@@ -107,11 +113,7 @@ const MenuPage: React.FC = () => {
     },
   ];
 
-  const reloadTree = () => {
-    tree().then(res => {
-      setTreeData([res.data]);
-    })
-  }
+
 
   useEffect(() => {
     reloadTree();