Подход к реализации RBAC в ReactJS

[allexx]

function isSatisfied(requirement, credentials) {
if (...) {
return false;
}
return true;
}

Куда безопаснее сделать наоборот

[nsaktaganov]

Наверное, это всё же к предпочтительности принципа «запрещено всё, что не разрешено» перед принципом «разрешено всё, что не запрещено»?

[alexesDev]

Не стоит оформлять HOC вот так

function protect(requirement, WrappedComponent)

на порядок лучше

const protect = requirement => WrappedComponet => props => { ... }

вашу версию нельзя компоновать через compose

import { compose } from 'redux';
import { connect } from 'react-redux';

const enhance = compose(
  protect({ ... }),
  connect(...),
);

export default enhance(App);

[nsaktaganov]

Спасибо, теперь понимаю, почему именно такой интерфейс у connect.

Кстати, в реализации protect оформлен нужным образом.

[nsaktaganov]

-

[xeLL]

У меня это, например, все не по коду размазано, а в роутере. Я использую react-router, connected-router и redux-auth-wrapper.

Допустим у меня есть массив роутов в App.jsx:

[{
  path: routes.ITEMS_LIST,
  component: userHasItemsListRead(ItemsList),
}].map(r => ({ ...r, component: userIsAuthenticatedRedirect(r.component) }))

Далее в лейауте:

<Switch>
 {authenticatedRoutes.map(r => (
  <Route key={r.path} path={r.path} component={r.component} />
 ))}
 <Route path={routes.LOGIN} component={userIsNotAuthenticatedRedirect(Login)} />
  <Redirect from={routes.ROOT} exact to={routes.HOME_PAGE} />
  <Route component={NotFoundPage} />
</Switch>

Соотвественно в файле с правилами для роутов:

export const userHasItemsListRead= connectedRouterRedirect({
  ...unauthenticatedRedirect,
  authenticatedSelector: userHasItemsListReadSelector,
  wrapperDisplayName: 'HasItemsListRead',
})

Где userHasItemsListReadSelector — это селектор декодированных уровней доступа из jwt токена. Конечно же, его можно использовать и в jsx.