reactjs - 如何在React Redux应用程序中实现基于角色的限制/权限？

Question

我有一个包含多个组件的 React-Redux-KoaJs 应用程序。我的用户角色也很少。现在我想仅向特定角色显示一些按钮、表格和 div，并对其他角色隐藏这些按钮、表格和 div。请记住，我不想隐藏整个组件，而只是隐藏组件的一部分。谁能帮我？提前致谢。

Answer 1

您可以按照 @Eudald Arranz 的建议检查每个组件中的角色或权限。或者您可以编写一个组件来为您检查权限。例如:

import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const ShowForPermissionComponent = (props) => {
    const couldShow = props.userPermissions.includes(props.permission);
    return couldShow ? props.children : null;
};

ShowForPermissionComponent.propTypes = {
    permission: PropTypes.string.isRequired,
    userPermissions: PropTypes.array.isRequired
};


const mapStateToProps = state => ({
    userPermissions: state.user.permission //<--- here you will get permissions for your user from Redux store
});

export const ShowForPermission = connect(mapStateToProps)(ShowForPermissionComponent);

然后你可以像这样使用这个组件:

import React from 'react';
import { ShowForPermission } from './ShowForPermission';

cons MyComponent = props => {
   return (
        <div>
            <ShowForPermission permission="DELETE">
                <button>Delete</button>
            </ShowForPermission>
        </div>
   );
}