Closed marong1997 closed 1 year ago
项目地址: https://github.com/marong1997/umi-layouts-issuse 表现: 1、actionsRender、avatarProps 未展示头像和操作内容 2、访问/user/detail/hhh页面时应该展示403无权限,但却展示了页面内容。 access文件: export default (initialState: any) => ({ login: true, user: true, 'user/one': true, 'user/detail/:type': true, version: false, }); routes文件: `export default [ { path: '/', name: '首页', component: '@/layouts/index', access: 'login', routes: [ { name: '首页', path: '/', component: '@/pages/index', access: 'login', }, { name: 'user', path: '/user', access: 'user', routes: [ { name: 'user/一级页面', path: '/user/one', component: '@/pages/users', }, { name: '/user/detail/:type', path: '/user/detail/:type', component: '@/pages/users/type', access: 'user/detail/:type', hideInMenu: true, }, ], },
export default (initialState: any) => ({ login: true, user: true, 'user/one': true, 'user/detail/:type': true, version: false, });
{ name: 'version', path: '/version', component: '@/pages/version', access: 'version', }, ],
}, ]; layouts文件: import { ProLayout } from '@ant-design/pro-components'; import { history } from 'umi'; import routes from '@/routes'; import { Button } from 'antd'; import React, { useEffect, useState } from 'react'; import './index.less';
layouts文件:
const flatten = (arr: any[], new_arr: any[] = []) => { arr?.forEach((item) => { const { routes, ...others } = item || {}; if (routes?.length > 0) { new_arr.push(others, ...flatten(routes)); } else { new_arr.push(others); } }); return new_arr; };
export default (props: any) => { const [pathname, set_pathname] = useState('/'); const [user_avatar, set_user_avatar] = useState('');
// 判断是否有权限,无权限展示403页面 const renderContent = () => { return props?.children; };
// 无layouts页面path获取 const getNoLayoutPagePathArray = (menus: any) => { // 无需权限页面 + 研究生嵌入页面链接 let paths: string[] = []; menus?.forEach((item: any) => { const { access, hideChildrenInMenu = false, menuRender = true, hideInMenu = false, routes, path, } = item || {}; if ( (access === 'login' || access === 'homePage') && hideChildrenInMenu && !menuRender && !hideInMenu ) { paths.push(path); if (routes?.length > 0) { // 有子节点,需要flatten之后将其遍历path flatten(routes).forEach((children) => { const { path } = children || {}; paths.push(path); }); } } }); return paths; };
// 无layouts页面展示 if (getNoLayoutPagePathArray(routes).includes(history.location.pathname)) { return renderContent(); }
return ( <> <ProLayout layout="mix" fixSiderbar={true} splitMenus={true} siderMenuType="group" menu={{ locale: false, request: async () => { return [ { path: '/', name: '首页', }, { name: '首页/一级路由', path: '/user', routes: [{ name: 'user/one', path: '/user/one' }], }, { name: 'version', path: '/version', }, ]; }, }} // route={{ path: '/', component: '@/layouts', routes }} location={{ pathname }} avatarProps={{ render: (props, dom) => { return (
); }, }} actionsRender={(props) => { // if (props?.isMobile) return []; // if (typeof window === 'undefined') return []; return [<Button>hhh</Button>]; // return [ // props.layout !== 'side' && document.body.clientWidth > 1400 ? ( // <SearchInput /> // ) : undefined, // <InfoCircleFilled key="InfoCircleFilled" />, // <QuestionCircleFilled key="QuestionCircleFilled" />, // <GithubFilled key="GithubFilled" />, // ]; }} headerTitleRender={(logo, title, _) => { return <>hhhhhh</>; }} menuItemRender={(item, dom) => { const { name, nameEn, source, icon, path } = item || {}; return ( <div onClick={() => { set_pathname(item?.path || '/'); history.push(item?.path); }} key={path} > {dom}00 </div> ); }} > {renderContent()} </ProLayout> </>
); }; `
由于缺乏足够的信息,我们暂时关闭了该 Issue。请修改(不要回复) Issue 提供最小重现以重新开启。谢谢。
umi 3 不维护了,建议升级到 umi 4
项目地址: https://github.com/marong1997/umi-layouts-issuse 表现: 1、actionsRender、avatarProps 未展示头像和操作内容 2、访问/user/detail/hhh页面时应该展示403无权限,但却展示了页面内容。 access文件:
export default (initialState: any) => ({ login: true, user: true, 'user/one': true, 'user/detail/:type': true, version: false, });
routes文件: `export default [ { path: '/', name: '首页', component: '@/layouts/index', access: 'login', routes: [ { name: '首页', path: '/', component: '@/pages/index', access: 'login', }, { name: 'user', path: '/user', access: 'user', routes: [ { name: 'user/一级页面', path: '/user/one', component: '@/pages/users', }, { name: '/user/detail/:type', path: '/user/detail/:type', component: '@/pages/users/type', access: 'user/detail/:type', hideInMenu: true, }, ], },}, ];
layouts文件:
import { ProLayout } from '@ant-design/pro-components'; import { history } from 'umi'; import routes from '@/routes'; import { Button } from 'antd'; import React, { useEffect, useState } from 'react'; import './index.less';const flatten = (arr: any[], new_arr: any[] = []) => { arr?.forEach((item) => { const { routes, ...others } = item || {}; if (routes?.length > 0) { new_arr.push(others, ...flatten(routes)); } else { new_arr.push(others); } }); return new_arr; };
export default (props: any) => { const [pathname, set_pathname] = useState('/'); const [user_avatar, set_user_avatar] = useState('');
// 判断是否有权限,无权限展示403页面 const renderContent = () => { return props?.children; };
// 无layouts页面path获取 const getNoLayoutPagePathArray = (menus: any) => { // 无需权限页面 + 研究生嵌入页面链接 let paths: string[] = []; menus?.forEach((item: any) => { const { access, hideChildrenInMenu = false, menuRender = true, hideInMenu = false, routes, path, } = item || {}; if ( (access === 'login' || access === 'homePage') && hideChildrenInMenu && !menuRender && !hideInMenu ) { paths.push(path); if (routes?.length > 0) { // 有子节点,需要flatten之后将其遍历path flatten(routes).forEach((children) => { const { path } = children || {}; paths.push(path); }); } } }); return paths; };
// 无layouts页面展示 if (getNoLayoutPagePathArray(routes).includes(history.location.pathname)) { return renderContent(); }
return ( <> <ProLayout layout="mix" fixSiderbar={true} splitMenus={true} siderMenuType="group" menu={{ locale: false, request: async () => { return [ { path: '/', name: '首页', }, { name: '首页/一级路由', path: '/user', routes: [{ name: 'user/one', path: '/user/one' }], }, { name: 'version', path: '/version', }, ]; }, }} // route={{ path: '/', component: '@/layouts', routes }} location={{ pathname }} avatarProps={{ render: (props, dom) => { return (
); }; `