f77675e5fc
- 实现 React + Arco Design Pro 基础框架 - 添加页面路由和布局组件 - 实现用户认证和权限管理 - 添加数据可视化图表组件 - 实现列表、表单等常用页面模块 - 配置 Redux 状态管理 - 添加工具函数和自定义 Hooks
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { GlobalState } from '@/store';
|
|
import { useSelector } from 'react-redux';
|
|
import authentication, { AuthParams } from '@/utils/authentication';
|
|
|
|
type PermissionWrapperProps = AuthParams & {
|
|
backup?: React.ReactNode;
|
|
};
|
|
|
|
const PermissionWrapper = (
|
|
props: React.PropsWithChildren<PermissionWrapperProps>
|
|
) => {
|
|
const { backup, requiredPermissions, oneOfPerm } = props;
|
|
const userInfo = useSelector((state: GlobalState) => state.userInfo);
|
|
|
|
const hasPermission = useMemo(() => {
|
|
return authentication(
|
|
{ requiredPermissions, oneOfPerm },
|
|
userInfo.permissions
|
|
);
|
|
}, [oneOfPerm, requiredPermissions, userInfo.permissions]);
|
|
|
|
if (hasPermission) {
|
|
return <>{convertReactElement(props.children)}</>;
|
|
}
|
|
if (backup) {
|
|
return <>{convertReactElement(backup)}</>;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
function convertReactElement(node: React.ReactNode): React.ReactElement {
|
|
if (!React.isValidElement(node)) {
|
|
return <>{node}</>;
|
|
}
|
|
return node;
|
|
}
|
|
|
|
export default PermissionWrapper;
|