From cc44e8ea747c9c140cd6c5baf00d8f0febea1903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 25 Oct 2019 11:36:12 +0800 Subject: [PATCH] bugfix: fix Authorized router (#5452) --- config/config.ts | 7 ++++++ src/components/Authorized/Authorized.tsx | 9 ++++++- src/layouts/BasicLayout.tsx | 31 ++++++++++++++++++++---- src/locales/en-US/menu.ts | 1 + src/locales/pt-BR/menu.ts | 2 +- src/locales/zh-CN/menu.ts | 1 + src/locales/zh-TW/menu.ts | 1 + src/pages/Admin.tsx | 31 ++++++++++++++++++++++++ src/utils/utils.ts | 15 ++++++++++++ 9 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 src/pages/Admin.tsx diff --git a/config/config.ts b/config/config.ts index ecf895b2..7f74e6a9 100644 --- a/config/config.ts +++ b/config/config.ts @@ -116,6 +116,13 @@ export default { icon: 'smile', component: './Welcome', }, + { + path: '/admin', + name: 'admin', + icon: 'crown', + component: './Admin', + authority: ['admin'], + }, { component: './404', }, diff --git a/src/components/Authorized/Authorized.tsx b/src/components/Authorized/Authorized.tsx index b5eff807..d91b7b55 100644 --- a/src/components/Authorized/Authorized.tsx +++ b/src/components/Authorized/Authorized.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Result } from 'antd'; import check, { IAuthorityType } from './CheckPermissions'; import AuthorizedRoute from './AuthorizedRoute'; @@ -18,7 +19,13 @@ type IAuthorizedType = React.FunctionComponent & { const Authorized: React.FunctionComponent = ({ children, authority, - noMatch = null, + noMatch = ( + + ), }) => { const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children; const dom = check(authority, childrenRender, noMatch); diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx index 66fecde1..19bd0731 100644 --- a/src/layouts/BasicLayout.tsx +++ b/src/layouts/BasicLayout.tsx @@ -14,19 +14,35 @@ import React, { useEffect } from 'react'; import Link from 'umi/link'; import { Dispatch } from 'redux'; import { connect } from 'dva'; -import { Icon } from 'antd'; +import { Icon, Result, Button } from 'antd'; import { formatMessage } from 'umi-plugin-react/locale'; import Authorized from '@/utils/Authorized'; import RightContent from '@/components/GlobalHeader/RightContent'; import { ConnectState } from '@/models/connect'; -import { isAntDesignPro } from '@/utils/utils'; +import { isAntDesignPro, getAuthorityFromRouter } from '@/utils/utils'; import logo from '../assets/logo.svg'; +const noMatch = ( + + Go Login + + } + /> +); + export interface BasicLayoutProps extends ProLayoutProps { breadcrumbNameMap: { [path: string]: MenuDataItem; }; + route: ProLayoutProps['route'] & { + authority: string[]; + }; settings: Settings; dispatch: Dispatch; } @@ -100,7 +116,7 @@ const footerRender: BasicLayoutProps['footerRender'] = () => { }; const BasicLayout: React.FC = props => { - const { dispatch, children, settings } = props; + const { dispatch, children, settings, location = { pathname: '/' } } = props; /** * constructor */ @@ -115,7 +131,6 @@ const BasicLayout: React.FC = props => { }); } }, []); - /** * init variables */ @@ -127,6 +142,10 @@ const BasicLayout: React.FC = props => { }); } }; + // get children authority + const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || { + authority: undefined, + }; return ( = props => { {...props} {...settings} > - {children} + + {children} + ); }; diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts index 8e0026fe..660cabff 100644 --- a/src/locales/en-US/menu.ts +++ b/src/locales/en-US/menu.ts @@ -2,6 +2,7 @@ export default { 'menu.welcome': 'Welcome', 'menu.more-blocks': 'More Blocks', 'menu.home': 'Home', + 'menu.admin': 'admin', 'menu.login': 'Login', 'menu.register': 'Register', 'menu.register.result': 'Register Result', diff --git a/src/locales/pt-BR/menu.ts b/src/locales/pt-BR/menu.ts index 3666b6b6..bb21686d 100644 --- a/src/locales/pt-BR/menu.ts +++ b/src/locales/pt-BR/menu.ts @@ -1,9 +1,9 @@ export default { 'menu.welcome': 'Welcome', 'menu.more-blocks': 'More Blocks', - 'menu.home': 'Início', 'menu.login': 'Login', + 'menu.admin': 'admin', 'menu.register': 'Registro', 'menu.register.result': 'Resultado de registro', 'menu.dashboard': 'Dashboard', diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts index f851fe96..86f515f2 100644 --- a/src/locales/zh-CN/menu.ts +++ b/src/locales/zh-CN/menu.ts @@ -2,6 +2,7 @@ export default { 'menu.welcome': '欢迎', 'menu.more-blocks': '更多区块', 'menu.home': '首页', + 'menu.admin': '管理页', 'menu.login': '登录', 'menu.register': '注册', 'menu.register.result': '注册结果', diff --git a/src/locales/zh-TW/menu.ts b/src/locales/zh-TW/menu.ts index 414affe1..b47724a4 100644 --- a/src/locales/zh-TW/menu.ts +++ b/src/locales/zh-TW/menu.ts @@ -4,6 +4,7 @@ export default { 'menu.home': '首頁', 'menu.login': '登錄', + 'menu.admin': '权限', 'menu.exception.403': '403', 'menu.exception.404': '404', 'menu.exception.500': '500', diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx new file mode 100644 index 00000000..a876fc90 --- /dev/null +++ b/src/pages/Admin.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Card, Typography, Alert, Icon } from 'antd'; +import { PageHeaderWrapper } from '@ant-design/pro-layout'; + +export default (): React.ReactNode => ( + + + + + Ant Design Pro{' '} + You + + +

+ Want to add more pages? Please refer to{' '} + + use block + + 。 +

+ +); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 71ed4ca5..9476d6d7 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,4 +1,5 @@ import { parse } from 'querystring'; +import pathRegexp from 'path-to-regexp'; /* eslint no-useless-escape:0 import/prefer-default-export:0 */ const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; @@ -22,3 +23,17 @@ export const isAntDesignProOrDev = (): boolean => { }; export const getPageQuery = () => parse(window.location.href.split('?')[1]); + +/** + * props.route.routes + * @param router [{}] + * @param pathname string + */ +export const getAuthorityFromRouter = ( + router: T[] = [], + pathname: string, +): T | undefined => { + const authority = router.find(({ path }) => path && pathRegexp(path).exec(pathname)); + if (authority) return authority; + return undefined; +}; -- GitLab