Как реализовать ограничения / разрешения на основе ролей в приложении «Реакция редукса»?

Question

У меня есть приложение React-Redux-KoaJs с несколькими компонентами.У меня также есть несколько пользовательских ролей.Теперь я хочу отобразить несколько кнопок, таблиц и элементов 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>
   );
}

Answer 2

Будьте осторожны с этим. Если действия некоторых ролей важны, вы всегда должны проверять их на своем бэкэнде. Можно легко изменить значения, хранящиеся в redux на внешнем интерфейсе, что позволяет злонамеренно использовать роли, если нет надлежащей проверки.

Если вы хотите продолжить возможный подход, это:

• Сохраните роли в вашем редукторе
• Привязать редуктор к компоненту:

function mapStateToProps(state) {
  const { user_roles } = state;
  return { user_roles };
}

export default connect(mapStateToProps)(YourComponent);

• Затем в вашем компоненте вы можете проверить user_roles и выполнить соответствующие действия:

render() {
    return (
      <div>
        {this.props.user_roles.role === "YOUR_ROLE_TO_CHECK" && <ActionsComponent />}
      </div>
    );
  }

Рендеринг ActionsComponent будет выполняться только тогда, когда роль равна требуемой.

Опять же, всегда проверяйте роли в своем бэкэнде!

Answer 3

Итак, я выяснил, что есть альтернативный и простой подход для реализации доступа на основе ролей (RBAC) во внешнем интерфейсе.

В своем состоянии хранилища резервов создайте объект с именем permissions (или можете называть его как угодно) следующим образом:

const InitialState = {
  permissions: {}
};

Затем при входе в систему настройте права доступа, которые вы хотите предоставить следующим образом:

InitialState['permissions'] ={
  canViewProfile: (role!=='visitor'),
  canDeleteUser: (role === 'coordinator' || role === 'admin')
  // Add more permissions as you like
}

В первом разрешении вы говорите, что можете просматривать профиль, если вы не являетесь посетителем. Во втором разрешении вы говорите, что можете удалить пользователя, только если вы являетесь администратором или координатором. и эти переменные будут иметь значение true или false в зависимости от роли вошедшего в систему пользователя. Таким образом, в вашем состоянии магазина у вас будет объект разрешений с ключами, которые представляют разрешения, и их значение будет определяться исходя из вашей роли.

Затем в вашем компоненте используйте состояние хранилища, чтобы получить объект разрешения. Вы можете сделать это используя connect как:

const mapStateToProps = (state) => {
  permissions : state.permissions
}

и затем подключите эти реквизиты к вашему Компоненту, как:

export default connect(mapStateToProps,null)(ComponentName);

Затем вы можете использовать эти реквизиты внутри вашего компонента на любом конкретном элементе, который вы хотите показать условно следующим образом:

{(this.props.permissions.canDeleteUser) && <button onClick={this.deleteUser}>Delete User</button>}

Приведенный выше код гарантирует, что кнопка удаления пользователя будет отображаться только в том случае, если у вас есть разрешения на удаление пользователя, т. Е. В объекте разрешений состояния хранилища, значение canDeleteUser равно true.

Вот и все, вы применили доступ на основе ролей. Вы можете использовать этот подход, так как он легко масштабируется и изменчив, поскольку у вас будут все разрешения в соответствии с ролями в одном месте.

Надеюсь, это поможет! Если я что-то упустил, пожалуйста, помогите мне в комментариях. : -)